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.
| Prop | Type | Default |
|---|---|---|
textThe text content to animate. | string | — |
staggerDurationDelay in seconds between each letter's animation start. | number | 0.04 |
staggerFromOrigin point of the stagger wave. | "first" | "last" | "center" | number | "first" |
stiffnessSpring stiffness — higher values produce snappier motion. | number | 220 |
dampingSpring damping — lower values produce bouncier motion. | number | 16 |
triggerOnClickWhen true, the animation triggers on click instead of hover. | boolean | false |
onCompleteCallback fired when the full animation cycle completes. | () => void | — |
classNameAdditional CSS classes for the container. | string | — |
letterClassNameCSS classes applied to each individual letter span. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
import { LetterCascade } from "@/components/ui/letter-cascade"
<LetterCascade
text="Hover Me"
className="text-4xl font-bold"
/>