A 3D split-flap text animation where letters flip with perspective depth, motion blur, and spring physics. Each character tilts back while its echo flips into view from below, creating a satisfying cascading wave.
pnpm dlx shadcn@latest add @componentry/letter-cascadeDependencies: framer-motion clsx tailwind-merge
| Prop | Type | Default |
|---|---|---|
text | stringThe text content to animate. | — |
staggerDuration | numberDelay in seconds between each letter's animation start. | 0.04 |
staggerFrom | "first" | "last" | "center" | numberOrigin point of the stagger wave. | "first" |
stiffness | numberSpring stiffness — higher values produce snappier motion. | 220 |
damping | numberSpring damping — lower values produce bouncier motion. | 16 |
triggerOnClick | booleanWhen true, the animation triggers on click instead of hover. | false |
onComplete | () => voidCallback fired when the full animation cycle completes. | — |
className | stringAdditional CSS classes for the container. | — |
letterClassName | stringCSS classes applied to each individual letter span. | — |
Keep in mind
Need a custom component?
I build bespoke UI components & websites tailored to your brand.
import { LetterCascade } from "@/components/ui/letter-cascade"
<LetterCascade
text="Hover Me"
className="text-4xl font-bold"
/>