A polished text reveal that splits copy by words, characters, or lines, then brings each segment in with readable directional motion, soft blur, and configurable stagger timing.
pnpm dlx shadcn@latest add @componentry/kinetic-text-revealDependencies: framer-motion clsx tailwind-merge
| Prop | Type | Default |
|---|---|---|
text | stringThe text content to reveal. | — |
splitBy | "words" | "characters" | "lines"How the text is segmented before animation. | "words" |
direction | "up" | "down" | "left" | "right"Direction each segment travels from. | "up" |
distance | numberTravel distance in pixels for hidden segments. | 20 |
stagger | numberDelay in seconds between animated segments. | 0.075 |
staggerFrom | "start" | "end" | "center" | "edges" | "random" | numberOrigin point for the stagger wave. | "start" |
transition | TransitionFramer Motion transition for each animated segment. | — |
blur | booleanWhether hidden segments start blurred. | true |
autoPlay | booleanStarts the reveal automatically after mount. | true |
delay | numberAutomatic reveal delay in seconds. | 0 |
className | stringAdditional CSS classes for the outer element. | — |
segmentClassName | stringCSS classes applied to each animated text segment. | — |
maskClassName | stringCSS classes applied to each clipping wrapper. | — |
onRevealStart | () => voidCallback fired when the reveal begins. | — |
onRevealComplete | () => voidCallback fired after the last segment completes. | — |
Keep in mind
Need a custom component?
I build bespoke UI components & websites tailored to your brand.
import { KineticTextReveal } from "@/components/ui/kinetic-text-reveal"
<KineticTextReveal
text="Interfaces that move with intent"
className="text-4xl font-bold tracking-tight"
/>