KQ-1838 · BIAS/STRIPES

Bias Stripes

Bands of colour run across the frame at an angle like fabric cut on the bias, and the cloth reaches for the hand: a Gaussian pull draws every point toward the pointer, so the stripes bend toward it, the band under the hand is drawn thin, its neighbours bunch beside it and the bands further out stretch to reach in, while a moving hand drags the bias along a little. The hand follows the pointer on the springs.glide constants and the pull rises on them; when the hand leaves, the pull relaxes on a softer spring that swings past flat by springiness and settles, and a click snaps a ripple through as a wave packet that kinks every band it crosses. Arrow keys move a ringed hand, Enter or Space ripples from it and Escape lets go.

KQ-1838 · BIAS/STRIPES

Coldbrook Textiles · spring run

Bias-cut silk, in four dyes

Coldbrook TextilesCut on the bias

at rest · 45° · ember · click to ripple

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/bias-stripes

Props

children: React.ReactNode; default —; Content on top of the cloth, in its own layer; its controls keep their presses.
angle: number; default 45; The bias: the stripes' angle from horizontal, in degrees.
pull: number; default 0.6; How hard the hand draws the cloth, and how big a ripple is, 0 to 1; held short of folding the cloth through itself.
palette: "ember" | "tide" | "orchard" | "dusk"; default "ember"; The dye set, four pigments repeating, the same in either theme.
colors: string[]; default —; Colours of your own, repeating in order; overrides palette.
stripe: number; default 26; Band width, in px.
reach: number; default 110; How far the pull reaches, in px; held under 45 % of the shorter side.
drag: number; default 0.4; How much a moving hand drags the bias along with it, 0 to 1.
springiness: number; default 0.5; How far the cloth overshoots past flat when the hand lets go, 0 (none) to 1 (a visible bounce).
ripple: boolean; default true; A click or tap snaps a ripple through the cloth.
texture: boolean; default true; A fine twill over the bands and soft fold shading where the cloth is pulled.
interactive: boolean; default true; The pointer and keys pull the cloth.
onRipple: (x: number, y: number) => void; default —; Fires when a click, tap or key sends a ripple, with its centre in px from the top left.
label: string; default "Striped cloth"; The cloth's accessible name, for the keyboard's way in.
disabled: boolean; default false; Shows the cloth but takes no input.
className: string; default "h-full w-full"; Sizes the cloth; it fills its parent by default.

Prop	Type	Default	Description
children	React.ReactNode	—	Content on top of the cloth, in its own layer; its controls keep their presses.
angle	number	45	The bias: the stripes' angle from horizontal, in degrees.
pull	number	0.6	How hard the hand draws the cloth, and how big a ripple is, 0 to 1; held short of folding the cloth through itself.
palette	"ember" \| "tide" \| "orchard" \| "dusk"	"ember"	The dye set, four pigments repeating, the same in either theme.
colors	string[]	—	Colours of your own, repeating in order; overrides palette.
stripe	number	26	Band width, in px.
reach	number	110	How far the pull reaches, in px; held under 45 % of the shorter side.
drag	number	0.4	How much a moving hand drags the bias along with it, 0 to 1.
springiness	number	0.5	How far the cloth overshoots past flat when the hand lets go, 0 (none) to 1 (a visible bounce).
ripple	boolean	true	A click or tap snaps a ripple through the cloth.
texture	boolean	true	A fine twill over the bands and soft fold shading where the cloth is pulled.
interactive	boolean	true	The pointer and keys pull the cloth.
onRipple	(x: number, y: number) => void	—	Fires when a click, tap or key sends a ripple, with its centre in px from the top left.
label	string	"Striped cloth"	The cloth's accessible name, for the keyboard's way in.
disabled	boolean	false	Shows the cloth but takes no input.
className	string	"h-full w-full"	Sizes the cloth; it fills its parent by default.