KQ-1472 · THREAD/DRIFT

Thread Drift

A background of long smooth threads drifting edge to edge, each through thirteen points riding two octaves of noise, so it bows and swings like silk in still air while neighbours cross, wrap and part again. Threads sit at their own depths over a thin stroke of the page colour, so crossings read over and under, and the bends catch the light. The hand gathers them, every point drawn toward it on its own springs.glide spring with the gather arriving on springs.drift; a press pinches them into a knot under the finger and on release they let go on springs.recoil, swinging back past their lanes twice; keyboard focus on a control inside gathers the threads to it and plucks them once.

KQ-1472 · THREAD/DRIFT

Waylight Mill

Yarn spun slow

Undyed wool from the valley, by the skein

silk · 18 threads · 1.4 px

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/thread-drift

Props

children: React.ReactNode; default —; The content on top of the threads: a hero line, a heading, a call to action.
count: number; default 18; How many threads cross the box, 2 to 60.
thickness: number; default 1.4; The nearest threads' width, px; farther ones are finer.
colors: "silk" | "indigo" | "meadow" | "ink" | string | readonly string[]; default "silk"; The threads' colours: a named palette, or up to three CSS colours.
speed: number; default 0.5; How fast the threads drift, 0 (still) to 2.
sway: number; default 0.55; How far the threads bow and swing, 0 (taut) to 1.
tangle: number; default 0.5; How far a thread strays from its lane, so neighbours cross and part, 0 to 1.
sheen: number; default 0.6; How brightly the bends catch the light, 0 (matte) to 1.
interactive: boolean; default true; The pointer and keyboard focus gather the threads, and a press pinches them.
pointerStrength: number; default 0.6; How hard the hand draws the threads in, 0 to 1.
radius: number; default 160; How far the hand reaches, px.
paused: boolean; default false; Stop the drift; the hand still gathers the threads.
seed: number; default 1; Seeds the lanes, depths and drift, so two skeins 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) gathering the threads.
onPinchChange: (pinched: boolean) => void; default —; Fires when a press pinches the threads (true) and when they are let go (false).
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 threads: a hero line, a heading, a call to action.
count	number	18	How many threads cross the box, 2 to 60.
thickness	number	1.4	The nearest threads' width, px; farther ones are finer.
colors	"silk" \| "indigo" \| "meadow" \| "ink" \| string \| readonly string[]	"silk"	The threads' colours: a named palette, or up to three CSS colours.
speed	number	0.5	How fast the threads drift, 0 (still) to 2.
sway	number	0.55	How far the threads bow and swing, 0 (taut) to 1.
tangle	number	0.5	How far a thread strays from its lane, so neighbours cross and part, 0 to 1.
sheen	number	0.6	How brightly the bends catch the light, 0 (matte) to 1.
interactive	boolean	true	The pointer and keyboard focus gather the threads, and a press pinches them.
pointerStrength	number	0.6	How hard the hand draws the threads in, 0 to 1.
radius	number	160	How far the hand reaches, px.
paused	boolean	false	Stop the drift; the hand still gathers the threads.
seed	number	1	Seeds the lanes, depths and drift, so two skeins 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) gathering the threads.
onPinchChange	(pinched: boolean) => void	—	Fires when a press pinches the threads (true) and when they are let go (false).
className	string	"h-full w-full"	Sizes and shapes the box.