KQ-1605 · CREASE/SWAP
Crease Swap
A word in squares of origami paper, white with the letter in ink on the front and coloured with the other word's letter on the back. Hover and the squares fold over one after another from the side you came in: the near corner lifts and travels over the diagonal crease to the far corner, the leading triangle rising on springs.snap and the trailing one following on springs.glide a beat behind, so the paper creases into a V along the diagonal before it lands coloured side up and the row reads the other word; every face is shaded from its own angle and a folded square keeps a faint crease. It is a toggle button: a press latches the back word, keyboard focus folds it like a hover, and Enter or Space toggles it.
Coldbrook · on tap
Cold brew
Hover or focus to turn the squares over to “Slow made”; press to keep them turned.front · cold brew · hover or press
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/crease-swap
Props
- children / text
- string
- default —
- The front word, as children or a prop.
- back
- string
- default —
- The word printed on the backs of the squares.
- as
- "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"
- default "p"
- The element that carries the words.
- pressed / defaultPressed
- boolean
- default false
- Latched to the back word.
- onPressedChange
- (pressed: boolean) => void
- default —
- Fires from the press that latched or released it.
- stagger
- number
- default 70
- Time between one square folding and the next, ms.
- depth
- number
- default 0.5
- How deep the crease folds mid-turn: 0 turns flat like a card, 1 folds right over before the other half follows.
- paperTone
- "indigo" | "vermilion" | "sage" | "kraft"
- default "indigo"
- The coloured side of the paper.
- perspective
- number
- default 4
- Perspective distance, em: smaller is a stronger 3D.
- shadow
- number
- default 0.5
- How dark the squares' shadows fall, 0 to 1.
- crease
- boolean
- default true
- Leave a faint crease in the paper once a square has folded.
- tease
- boolean
- default true
- Fold over and back once, the first time it comes into view.
- interactive
- boolean
- default true
- Hover, focus and presses fold it.
- sound
- boolean
- default false
- Paper sounds for the folds the visitor makes.
- disabled
- boolean
- default false
- Stays as it is.
- onTurn
- (showingBack: boolean) => void
- default —
- A fold finished: true when the back word shows.
- className
- string
- default —
- Size: the squares are drawn in em.
| Prop | Type | Default | Description |
|---|---|---|---|
| children / text | string | — | The front word, as children or a prop. |
| back | string | — | The word printed on the backs of the squares. |
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "p" | The element that carries the words. |
| pressed / defaultPressed | boolean | false | Latched to the back word. |
| onPressedChange | (pressed: boolean) => void | — | Fires from the press that latched or released it. |
| stagger | number | 70 | Time between one square folding and the next, ms. |
| depth | number | 0.5 | How deep the crease folds mid-turn: 0 turns flat like a card, 1 folds right over before the other half follows. |
| paperTone | "indigo" | "vermilion" | "sage" | "kraft" | "indigo" | The coloured side of the paper. |
| perspective | number | 4 | Perspective distance, em: smaller is a stronger 3D. |
| shadow | number | 0.5 | How dark the squares' shadows fall, 0 to 1. |
| crease | boolean | true | Leave a faint crease in the paper once a square has folded. |
| tease | boolean | true | Fold over and back once, the first time it comes into view. |
| interactive | boolean | true | Hover, focus and presses fold it. |
| sound | boolean | false | Paper sounds for the folds the visitor makes. |
| disabled | boolean | false | Stays as it is. |
| onTurn | (showingBack: boolean) => void | — | A fold finished: true when the back word shows. |
| className | string | — | Size: the squares are drawn in em. |