KQ-1518 · PLEAT/FIELD

Pleat Field

A fan-shaped sheet of glowing points folded into accordion pleats in real 3D: each panel keeps its flat width, so as the folds steepen the fan narrows and its pleats deepen, and every point is tinted by the way its face leans, so a quiet spectrum runs crease to crease and sweeps toward the palette's middle as the fan opens. A sideways drag opens and closes it 1:1 with rubber-banded ends, and a release eases it back to half open on springs.drift with the throw's velocity; the first time it is seen it flicks open from closed on springs.snap, and the pointer leans it on the glide constants. It is a slider: arrow keys open and close it while held and let it ease back when let go, Home and End close and open it fully.

KQ-1518 · PLEAT/FIELD

Fernworks Paper

Folded light

One sheet, 12 pleats, drag it open

half open · 12 pleats · prism

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/pleat-field

Props

pleats: number; default 12; How many panels the sheet is folded into, 6 to 24.
density: number; default 0.5; How closely the points sit, 0 (a sparse lattice) to 1 (a fine one).
palette: "prism" | "tide" | "ember" | "mono"; default "prism"; The spectrum the faces are tinted from, crease to crease.
colors: string[]; default —; Two or three CSS colours that replace the palette: one way, the creases, the other way.
rest: number; default 0.5; Where the sheet rests, 0 (closed) to 1 (fully open).
springBack: boolean; default true; Let go, the sheet eases back to rest; off, it stays where it is left.
crease: number; default 0.6; The folds' edge, 0 (rounded, like cloth) to 1 (knife-sharp creases).
tilt: number; default 20; How far the top of the fan leans away from the eye, degrees, 0 to 60.
glow: number; default 0.6; How large and bright the points burn, 0 to 1.
sway: number; default 0.4; How much the fan breathes and shimmers while it rests, 0 (still) to 1.
interactive: boolean; default true; The hand opens and closes the sheet and the pointer leans it.
paused: boolean; default false; Hold the breathing still; the hand still works.
seed: number; default 1; Seeds each point's shimmer, so two sheets never twinkle together.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Pleated sheet"; The sheet's accessible name.
onOpenChange: (open: number) => void; default —; Fires with the opening (0 to 1) the hand or the keys asked for, and with rest when it is let go.
disabled: boolean; default false; The sheet is drawn and holds still; drag and keys are ignored.
className: string; default "h-full w-full"; Sizes the box.

Prop	Type	Default	Description
pleats	number	12	How many panels the sheet is folded into, 6 to 24.
density	number	0.5	How closely the points sit, 0 (a sparse lattice) to 1 (a fine one).
palette	"prism" \| "tide" \| "ember" \| "mono"	"prism"	The spectrum the faces are tinted from, crease to crease.
colors	string[]	—	Two or three CSS colours that replace the palette: one way, the creases, the other way.
rest	number	0.5	Where the sheet rests, 0 (closed) to 1 (fully open).
springBack	boolean	true	Let go, the sheet eases back to rest; off, it stays where it is left.
crease	number	0.6	The folds' edge, 0 (rounded, like cloth) to 1 (knife-sharp creases).
tilt	number	20	How far the top of the fan leans away from the eye, degrees, 0 to 60.
glow	number	0.6	How large and bright the points burn, 0 to 1.
sway	number	0.4	How much the fan breathes and shimmers while it rests, 0 (still) to 1.
interactive	boolean	true	The hand opens and closes the sheet and the pointer leans it.
paused	boolean	false	Hold the breathing still; the hand still works.
seed	number	1	Seeds each point's shimmer, so two sheets never twinkle together.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Pleated sheet"	The sheet's accessible name.
onOpenChange	(open: number) => void	—	Fires with the opening (0 to 1) the hand or the keys asked for, and with rest when it is let go.
disabled	boolean	false	The sheet is drawn and holds still; drag and keys are ignored.
className	string	"h-full w-full"	Sizes the box.