KQ-1545 · CUTOUT/LETTERS
Cutout Letters
A headline die-cut into heavy card: each letter is a tab hinged along its baseline, read by its cut line until the pointer comes near and the tabs fold up out of their holes toward you in real CSS 3D — faces darkening as they turn from the top light, soft shadows falling on the card, and past ninety degrees the tabs tip over to show the blank reverse while the holes show the darker stock below. Each tab's angle is a spring that rises on springs.snap and lies back on a spring between snap and drift, slapping flat with one small bounce, and on its trigger or keyboard focus a wave lifts the whole word letter by letter. A transparent slider gives the keyboard Left and Right to lift letters one at a time, Home and End to jump, Escape to lay them flat and Enter or Space to run the wave.
Gaugeworks · paper goods
Cut from card
flat · move near the letters
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/cutout-letters
Props
- children / text
- string
- default —
- The headline, as children or a prop.
- as
- "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"
- default "p"
- The element that carries the headline.
- radius
- number
- default 2
- How far the pointer's reach extends, em.
- foldAngle
- number
- default 120
- How far a tab folds up, degrees: under 90 they stand toward you, over 90 they tip over and show their backs.
- paperTone
- "cream" | "kraft" | "slate" | "blush"
- default "cream"
- The card stock.
- shadow
- number
- default 0.6
- How dark the raised tabs' shadows fall, 0 to 1.
- relax
- number
- default 0.4
- How slowly tabs lie back down, 0 (the snap spring) to 1 (the drift spring).
- depth
- number
- default 5
- Perspective distance, em: smaller is a stronger 3D.
- trigger
- "mount" | "inView" | "hover" | "manual"
- default "inView"
- When the wave of folding tabs runs across the headline.
- once
- boolean
- default true
- Run the wave once, or each time the headline re-enters view or is hovered.
- play
- boolean
- default false
- With trigger "manual": true runs the wave.
- delay
- number
- default 0
- Wait before the wave, ms.
- stagger
- number
- default 55
- Time the wave takes from one letter to the next, ms.
- interactive
- boolean
- default true
- The pointer, a touch drag and the keys lift the letters.
- sound
- boolean
- default false
- Paper sounds for the folds the visitor makes.
- onFold
- (index: number | null) => void
- default —
- The letter nearest the pointer or the keys changed; null when it lets go.
- onComplete
- () => void
- default —
- The wave has passed and every tab lies flat.
- className
- string
- default —
- Size and layout (w-fit hugs the card to the words).
| Prop | Type | Default | Description |
|---|---|---|---|
| children / text | string | — | The headline, as children or a prop. |
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "p" | The element that carries the headline. |
| radius | number | 2 | How far the pointer's reach extends, em. |
| foldAngle | number | 120 | How far a tab folds up, degrees: under 90 they stand toward you, over 90 they tip over and show their backs. |
| paperTone | "cream" | "kraft" | "slate" | "blush" | "cream" | The card stock. |
| shadow | number | 0.6 | How dark the raised tabs' shadows fall, 0 to 1. |
| relax | number | 0.4 | How slowly tabs lie back down, 0 (the snap spring) to 1 (the drift spring). |
| depth | number | 5 | Perspective distance, em: smaller is a stronger 3D. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | When the wave of folding tabs runs across the headline. |
| once | boolean | true | Run the wave once, or each time the headline re-enters view or is hovered. |
| play | boolean | false | With trigger "manual": true runs the wave. |
| delay | number | 0 | Wait before the wave, ms. |
| stagger | number | 55 | Time the wave takes from one letter to the next, ms. |
| interactive | boolean | true | The pointer, a touch drag and the keys lift the letters. |
| sound | boolean | false | Paper sounds for the folds the visitor makes. |
| onFold | (index: number | null) => void | — | The letter nearest the pointer or the keys changed; null when it lets go. |
| onComplete | () => void | — | The wave has passed and every tab lies flat. |
| className | string | — | Size and layout (w-fit hugs the card to the words). |