Docs·Letter Cascade

Letter Cascade

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.

Installation

pnpm dlx shadcn@latest add @componentry/letter-cascade

Usage

API Reference

PropertyTypeDefault
text

The text content to animate.

string—
staggerDuration

Delay in seconds between each letter's animation start.

number0.04
staggerFrom

Origin point of the stagger wave.

"first" | "last" | "center" | number"first"
stiffness

Spring stiffness — higher values produce snappier motion.

number220
damping

Spring damping — lower values produce bouncier motion.

number16
triggerOnClick

When true, the animation triggers on click instead of hover.

booleanfalse
onComplete

Callback fired when the full animation cycle completes.

() => void—
className

Additional CSS classes for the container.

string—
letterClassName

CSS classes applied to each individual letter span.

string—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
HHoovveerr MMeeHover over the text
import { LetterCascade } from "@/components/ui/letter-cascade"
<LetterCascade
  text="Hover Me"
  className="text-4xl font-bold"
/>