We craft digital experiences that leave a lasting impression.
Every pixel matters. Every animation counts.
Overview
The StaggeredText component is an essential utility for modern scrollytelling sites. Instead of manually splitting text and creating complex staggered arrays in framer-motion, this component automatically handles the string splitting (preserving whitespace wrapping) and orchestrates a beautiful cascading reveal when the text enters the viewport.
Usage
import { StaggeredText } from "@/components/creative/staggered-text"
export default function Section() {
return (
<section className="py-20">
<StaggeredText
text="The ultimate solution for digital creators."
type="word"
animation="slide-up"
staggerDelay={0.1}
className="text-6xl font-bold"
/>
</section>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { StaggeredText } from "@/components/creative/staggered-text";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { StaggeredText } from "@/components/creative/staggered-text";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<StaggeredText
text="example"
type{/* value */}
staggerDelay{10}
/>
</div>
);
}