KQ-1245 · PAPER/FACETS
Paper Facets
A backdrop of folded card: a low-poly field of flat facets lit by a lamp the pointer carries over the sheet, each facet shaded from its own normal so faces turned toward the lamp brighten, faces turned away fall into shadow and glints run across the folds. The lamp trails the hand on the glide spring and drifts home on the drift spring when the pointer leaves, and a new seed refolds the sheet on the drift spring as the card relaxes and creases again. The lamp is a real 2D slider under the content: arrow keys move it, Home and End go to the side edges, Page Up and Page Down to the top and bottom.
Fieldline Press
Folded by hand
Autumn card samples, cut and scored in small runs
light at rest · white card · 72 facets
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/paper-facets
Props
- children
- React.ReactNode
- default —
- What sits on the paper: a hero, a heading, a call to action. Its text takes an ink that reads on the paper.
- facets
- number
- default 72
- About how many facets show, 20 to 120: broad folds or a fine crumple.
- relief
- number
- default 0.6
- How deep the folds are, 0 to 1: flat card, or hard creases with dark valleys.
- paper
- "white" | "kraft" | "ink"
- default "white"
- The card.
- seed
- number
- default 1
- Folds the sheet: the same seed always makes the same folds. A new one refolds it.
- rest
- { x: number; y: number }
- default { x: 0.22, y: 0.18 }
- Where the lamp rests when nobody is moving it, as fractions of the box.
- onLightChange
- (light: { x: number; y: number } | null) => void
- default —
- Fires when the visitor moves the lamp (pointer, touch or keys), and with null when it goes back to rest.
- interactive
- boolean
- default true
- Let the pointer and the keyboard move the lamp. Off, the sheet is decoration only: no tab stop, no pointer handling.
- label
- string
- default "Light"
- The lamp control's accessible name.
- className
- string
- default "h-full w-full"
- Sets the size.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | What sits on the paper: a hero, a heading, a call to action. Its text takes an ink that reads on the paper. |
| facets | number | 72 | About how many facets show, 20 to 120: broad folds or a fine crumple. |
| relief | number | 0.6 | How deep the folds are, 0 to 1: flat card, or hard creases with dark valleys. |
| paper | "white" | "kraft" | "ink" | "white" | The card. |
| seed | number | 1 | Folds the sheet: the same seed always makes the same folds. A new one refolds it. |
| rest | { x: number; y: number } | { x: 0.22, y: 0.18 } | Where the lamp rests when nobody is moving it, as fractions of the box. |
| onLightChange | (light: { x: number; y: number } | null) => void | — | Fires when the visitor moves the lamp (pointer, touch or keys), and with null when it goes back to rest. |
| interactive | boolean | true | Let the pointer and the keyboard move the lamp. Off, the sheet is decoration only: no tab stop, no pointer handling. |
| label | string | "Light" | The lamp control's accessible name. |
| className | string | "h-full w-full" | Sets the size. |