KQ-1361 · CASCADE/SPLIT
Cascade Split
The text splits into letters, words or the lines it wraps to, and each piece arrives on a spring in one of three ways: rising through an edge just under its baseline on springs.snap, dropping in and settling on springs.recoil, or swinging down from a pin at its top-left corner like a hanging tile, past rest and back on recoil. The gaps between pieces follow an easing curve rather than a fixed step, and leaving replays the curve in reverse, last piece first, on the exit ease. Pointer passes nudge each piece in its own idiom through a second transform; focused, Left and Right walk a probe that nudges each piece and Enter or Space plays it again.
Fieldline · field notes
Every field, noted on time
Left and Right nudge the pieces; Enter plays it again.arriving · by letter · rise
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/cascade-split
Props
- text
- string
- default —
- The words.
- as
- "h1" | "h2" | "h3" | "p" | "span" | "div"
- default "p"
- The element rendered.
- by
- "letter" | "word" | "line"
- default "letter"
- What arrives as one piece: each letter, each word, or each line as it wraps.
- motion
- "rise" | "drop" | "swing"
- default "rise"
- How the pieces enter: rise through the baseline, drop and settle, or swing down from a top-left pin.
- stagger
- number
- default 30
- The base gap between pieces, ms, before the curve shapes it.
- curve
- "even" | "ease-in" | "ease-out" | "ease-in-out" | ((t: number) => number)
- default "ease-in"
- How the gaps are spread across the text: an easing name or your own curve from 0–1 to 0–1.
- distance
- number
- default 1
- Travel: a share of a line for rise and drop, of the safe swing angle for swing, 0 to 1.5.
- spring
- "auto" | "snap" | "recoil" | "glide"
- default "auto"
- The spring the pieces land on; auto picks the one that suits the motion.
- fade
- boolean
- default true
- Fade the pieces as they travel.
- trigger
- "mount" | "inView" | "hover" | "manual"
- default "inView"
- What brings the text in.
- once
- boolean
- default true
- Arrive once; false leaves when it goes out of view or the hover ends.
- play
- boolean
- default —
- Manual trigger: true arrives, false leaves in reverse.
- delay
- number
- default 0
- Wait before the first piece, ms.
- duration
- number
- default 300
- Time scale of the springs, ms; their damping ratios are kept.
- interactive
- boolean
- default true
- Hover nudges, a press (or Enter or Space) to replay, and the keyboard probe.
- onComplete
- (state: "in" | "out") => void
- default —
- An arrival or an exit settled.
- className
- string
- default —
- Size and type; travel is in em.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The words. |
| as | "h1" | "h2" | "h3" | "p" | "span" | "div" | "p" | The element rendered. |
| by | "letter" | "word" | "line" | "letter" | What arrives as one piece: each letter, each word, or each line as it wraps. |
| motion | "rise" | "drop" | "swing" | "rise" | How the pieces enter: rise through the baseline, drop and settle, or swing down from a top-left pin. |
| stagger | number | 30 | The base gap between pieces, ms, before the curve shapes it. |
| curve | "even" | "ease-in" | "ease-out" | "ease-in-out" | ((t: number) => number) | "ease-in" | How the gaps are spread across the text: an easing name or your own curve from 0–1 to 0–1. |
| distance | number | 1 | Travel: a share of a line for rise and drop, of the safe swing angle for swing, 0 to 1.5. |
| spring | "auto" | "snap" | "recoil" | "glide" | "auto" | The spring the pieces land on; auto picks the one that suits the motion. |
| fade | boolean | true | Fade the pieces as they travel. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | What brings the text in. |
| once | boolean | true | Arrive once; false leaves when it goes out of view or the hover ends. |
| play | boolean | — | Manual trigger: true arrives, false leaves in reverse. |
| delay | number | 0 | Wait before the first piece, ms. |
| duration | number | 300 | Time scale of the springs, ms; their damping ratios are kept. |
| interactive | boolean | true | Hover nudges, a press (or Enter or Space) to replay, and the keyboard probe. |
| onComplete | (state: "in" | "out") => void | — | An arrival or an exit settled. |
| className | string | — | Size and type; travel is in em. |