stagger text

Animated component built with motion and tailwind.css to animate a series of letters with a staggered effect. ### Props - `words`: An array of strings representing the words to be animated. - `stagger`: Optional, A number representing the delay between the animations of each letter, if not provided it will be 0.05s between each letter. - `transition`: Optional, object defining the transition properties for the animation. - `direction`: Optional, A string indicating the direction of the animation, if not provided it will animate from bottom. - `className`: An optional string to apply additional tailwind classes. - `props`: any prop associated with "<div>" element. ### Behavior - When the component is in view, it triggers the animation to change from the `hidden` state to the `visible` state in an orchestration pattern. ### Example Usage ```tsx <StaggerText words={['Hello', 'world']} stagger={0.1} transition={{ duration: 0.5 }} direction=""top" className="my-custom-class" />

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

import { StaggerText } from "@/components/ui/stagger-text"

export function StaggerTextDemo() {
  return (
    <div className="container mx-auto h-svh place-content-center text-center">
      <StaggerText
        className="text-3xl font-medium"
        text="Create beautiful stagger animation"
        direction="bottom"
      />
      <StaggerText
        className="text-3xl font-medium"
        text="Create beautiful stagger animation"
        direction="top"
      />
    </div>
  )
}