Components
Loading preview...
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" />
@YoucefBnm
npx shadcn@latest add https://21st.dev/r/youcefbnm/stagger-textimport { 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>
)
}