KQ-1359 · PAPER/CREASE
Paper Crease
Each line of the headline is a strip of paper cut into panels along horizontal creases, nested hinges rolled toward the reader so only the blank back of the first flap shows; unfolding opens crease after crease on springs.snap, each panel's back darkening toward edge-on and its face catching a crease shadow and a glare that slides down it, with a faint crease left in the paper. Under the pointer or with focus the creases refold a few degrees like paper with memory (snap in, glide out). A press — or Enter or Space — folds the letter up on the exit ease, last crease first, and opens it again with a crinkle per crease when sound is on.
Coldbrook Bank · letter 0412
Letter of credit, signed and sealed
Press Enter to fold the letter and open it again.folded · in its envelope
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/paper-crease
Props
- text
- string
- default —
- The headline; each \n starts a new line, and each line folds as its own strip.
- as
- "h1" | "h2" | "h3" | "p" | "div"
- default "p"
- The element rendered.
- folds
- number
- default 3
- Panels per line, 2 to 4: one fewer creases.
- speed
- number
- default 1
- How fast the creases open, 0.5 to 2.
- shade
- number
- default 0.5
- Depth of the crease shadow, the glare and the paper's shading, 0 to 1.
- crease
- number
- default 0.4
- How visible the crease lines stay once the letter is open, 0 to 1.
- memory
- number
- default 0.5
- How far the paper refolds under the pointer or focus, 0 (flat) to 1.
- paper
- string
- default "var(--card)"
- The colour of the back of the paper.
- ink
- string
- default "currentColor"
- The text colour.
- sound
- boolean
- default false
- Crinkle as each crease opens, for the visitor's press. Off unless asked for.
- trigger
- "mount" | "inView" | "hover" | "manual"
- default "inView"
- What unfolds the letter.
- once
- boolean
- default true
- Unfold once; false folds it up again when it leaves view or the hover ends.
- play
- boolean
- default —
- Manual trigger: true unfolds, false folds.
- delay
- number
- default 0
- Wait before the first crease opens, ms.
- stagger
- number
- default 160
- Gap between creases opening, ms.
- duration
- number
- default 380
- Time scale of the hinge spring, ms; its damping ratio is kept.
- interactive
- boolean
- default true
- Hover memory, and a press (or Enter or Space) folds it and opens it again.
- onComplete
- (state: "open" | "folded") => void
- default —
- A fold or an unfold settled.
- className
- string
- default —
- Size and type; the perspective is in em.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The headline; each \n starts a new line, and each line folds as its own strip. |
| as | "h1" | "h2" | "h3" | "p" | "div" | "p" | The element rendered. |
| folds | number | 3 | Panels per line, 2 to 4: one fewer creases. |
| speed | number | 1 | How fast the creases open, 0.5 to 2. |
| shade | number | 0.5 | Depth of the crease shadow, the glare and the paper's shading, 0 to 1. |
| crease | number | 0.4 | How visible the crease lines stay once the letter is open, 0 to 1. |
| memory | number | 0.5 | How far the paper refolds under the pointer or focus, 0 (flat) to 1. |
| paper | string | "var(--card)" | The colour of the back of the paper. |
| ink | string | "currentColor" | The text colour. |
| sound | boolean | false | Crinkle as each crease opens, for the visitor's press. Off unless asked for. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | What unfolds the letter. |
| once | boolean | true | Unfold once; false folds it up again when it leaves view or the hover ends. |
| play | boolean | — | Manual trigger: true unfolds, false folds. |
| delay | number | 0 | Wait before the first crease opens, ms. |
| stagger | number | 160 | Gap between creases opening, ms. |
| duration | number | 380 | Time scale of the hinge spring, ms; its damping ratio is kept. |
| interactive | boolean | true | Hover memory, and a press (or Enter or Space) folds it and opens it again. |
| onComplete | (state: "open" | "folded") => void | — | A fold or an unfold settled. |
| className | string | — | Size and type; the perspective is in em. |