KQ-1450 · COLOR/FOLD

Color Fold

A background of ribbons of paint folded round one another: each ribbon's centreline bends in two slow travelling waves, the ribbons overlap and plait over and under each other, and each one turns over along its length — pinching to a crease where it is edge-on and showing its darker back where it has turned — with a soft shadow on whatever lies beneath it. The pointer is a hand in the paint: the ribbons part around it, its place following on springs.glide and its presence arriving on springs.drift, and a press throws a fold, a ring that leaves the press and turns every ribbon right over as it passes; keyboard focus on a control inside parts the ribbons there and throws a softer fold.

KQ-1450 · COLOR/FOLD

Basinworks Paint

Colours that fold into each other

Five new house colours

cobalt · 5 bands · curve 0.55

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/color-fold

Props

children: React.ReactNode; default —; The content on top of the ribbons: a hero line, a heading, a call to action.
bands: number; default 5; How many ribbons of colour lie across the frame, 2 to 8.
curve: number; default 0.55; How deeply the ribbons bend, 0 (straight) to 1 (deep rolling bends).
palette: "cobalt" | "clay" | "sea" | "dusk" | readonly string[]; default "cobalt"; A named palette, or 2 to 8 CSS colours of your own, one per ribbon in turn.
width: number; default 1.3; A ribbon's width as a share of its spacing, 0.6 to 1.6: past 1 they overlap and fold over each other.
twist: number; default 0.5; How far the ribbons turn over along their length, 0 (flat) to 1 (turning right over).
angle: number; default -8; The tilt of the whole stack, degrees, −30 to 30.
speed: number; default 0.5; How fast the bends travel, 0 (still) to 2.
shadow: number; default 0.5; How dark a ribbon's shadow falls on the ones beneath it, 0 to 1.
sheen: number; default 0.4; A soft light along the flat of each ribbon, 0 to 1.
grain: number; default 0.2; A whisper of grain that also hides banding, 0 to 1.
interactive: boolean; default true; The pointer and keyboard focus part the ribbons, and a press throws a fold along them.
pointerStrength: number; default 0.6; How far the hand parts the ribbons and how hard a press folds them, 0 to 1.
paused: boolean; default false; Hold the ribbons still; the hand still parts and folds them.
seed: number; default 1; Seeds every bend, twist and weave, so two folds never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) parting the ribbons.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content on top of the ribbons: a hero line, a heading, a call to action.
bands	number	5	How many ribbons of colour lie across the frame, 2 to 8.
curve	number	0.55	How deeply the ribbons bend, 0 (straight) to 1 (deep rolling bends).
palette	"cobalt" \| "clay" \| "sea" \| "dusk" \| readonly string[]	"cobalt"	A named palette, or 2 to 8 CSS colours of your own, one per ribbon in turn.
width	number	1.3	A ribbon's width as a share of its spacing, 0.6 to 1.6: past 1 they overlap and fold over each other.
twist	number	0.5	How far the ribbons turn over along their length, 0 (flat) to 1 (turning right over).
angle	number	-8	The tilt of the whole stack, degrees, −30 to 30.
speed	number	0.5	How fast the bends travel, 0 (still) to 2.
shadow	number	0.5	How dark a ribbon's shadow falls on the ones beneath it, 0 to 1.
sheen	number	0.4	A soft light along the flat of each ribbon, 0 to 1.
grain	number	0.2	A whisper of grain that also hides banding, 0 to 1.
interactive	boolean	true	The pointer and keyboard focus part the ribbons, and a press throws a fold along them.
pointerStrength	number	0.6	How far the hand parts the ribbons and how hard a press folds them, 0 to 1.
paused	boolean	false	Hold the ribbons still; the hand still parts and folds them.
seed	number	1	Seeds every bend, twist and weave, so two folds never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) parting the ribbons.
className	string	"h-full w-full"	Sizes and shapes the box.