Animated component built with motion and tailwind.css to animate a series of letters with a staggered effect.
Propswords: 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.hidden state to the visible state in an orchestration pattern.<StaggerText
words={['Hello', 'world']}
stagger={0.1}
transition={{ duration: 0.5 }}
direction=""top"
className="my-custom-class"
/>
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>
)
}
Part of Systaliko UI — browse the full library on 21st.dev.