Shuffle Text

Text

About

This is a simple shuffle text component!

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Shuffle Text to your project and fits it to your theme.

Code

How Shuffle Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Shuffle  from "@/components/ui/shuffle-text";

export default function DemoOne() {
  return <Shuffle
  text="Hello, Devs!"
  shuffleDirection="right"
  duration={0.35}
  animationMode="evenodd"
  shuffleTimes={1}
  ease="power3.out"
  stagger={0.03}
  threshold={0.1}
  triggerOnce={true}
  triggerOnHover={true}
  respectReducedMotion={true}
/>
}