KQ-1411 · KELP/STRANDS

Kelp Strands

A bed of kelp anchored along the bottom of its box, every strand a Verlet chain with a fixed root, buoyant toward the tip, held upright by a bending constraint set by stiffness and dragged toward the velocity of the water around it, so it sways as a slow swell rolls across the bed. The pointer pushes the water: strands part around the hand, the eddies it leaves keep curling them for a moment, and they spring back; up to three depth rows (further back is shorter, fainter and slower) are drawn as tapered blades shaded from base to tip with a float at each end. Keyboard focus inside parts the strands around the focused element.

KQ-1411 · KELP/STRANDS

Basinworks · kelp survey

Slow water, long light.

current 0.50 · pass through the strands

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/kelp-strands

Props

children: ReactNode; default —; Content laid over the bed, such as a headline; it stays fully interactive.
count: number; default 28; How many strands grow across the box.
current: number; default 0.5; The strength of the slow current that sways the bed, 0 (still water) to 1 (a strong swell).
stiffness: number; default 0.5; How upright and springy the strands are, 0 (limp, trailing long behind a wake) to 1 (stalks that snap back).
rows: number; default 3; Depth rows, 1 to 3: rows further back are shorter, fainter and slower.
height: number; default 0.8; How far up the box the tallest strands reach, 0 to 1.
width: number; default 5; The root width of a front-row strand, in CSS pixels.
wake: number; default 0.6; How hard the pointer pushes the water, 0 to 1.
radius: number; default 70; How far the pointer's push reaches, in CSS pixels.
colors: [string, string]; default pigments of --success and --signal; The base and tip colours, any CSS colours resolved on the element.
floats: boolean; default true; A small gas float at the tip of each strand.
motes: number; default 12; Faint specks drifting with the current.
followFocus: boolean; default true; Keyboard focus inside parts the strands around the focused element.
interactive: boolean; default true; The pointer (and a sideways swipe) pushes through the strands.
paused: boolean; default false; Holds the bed still and stops the loop.
seed: number; default 4; Seed for where every strand grows, how tall it is and how it sways.
dpr: number; default 2; The highest device pixel ratio the canvas draws at (never above 2).
className: string; default —; Classes for the box; give it a height.

Prop	Type	Default	Description
children	ReactNode	—	Content laid over the bed, such as a headline; it stays fully interactive.
count	number	28	How many strands grow across the box.
current	number	0.5	The strength of the slow current that sways the bed, 0 (still water) to 1 (a strong swell).
stiffness	number	0.5	How upright and springy the strands are, 0 (limp, trailing long behind a wake) to 1 (stalks that snap back).
rows	number	3	Depth rows, 1 to 3: rows further back are shorter, fainter and slower.
height	number	0.8	How far up the box the tallest strands reach, 0 to 1.
width	number	5	The root width of a front-row strand, in CSS pixels.
wake	number	0.6	How hard the pointer pushes the water, 0 to 1.
radius	number	70	How far the pointer's push reaches, in CSS pixels.
colors	[string, string]	pigments of --success and --signal	The base and tip colours, any CSS colours resolved on the element.
floats	boolean	true	A small gas float at the tip of each strand.
motes	number	12	Faint specks drifting with the current.
followFocus	boolean	true	Keyboard focus inside parts the strands around the focused element.
interactive	boolean	true	The pointer (and a sideways swipe) pushes through the strands.
paused	boolean	false	Holds the bed still and stops the loop.
seed	number	4	Seed for where every strand grows, how tall it is and how it sways.
dpr	number	2	The highest device pixel ratio the canvas draws at (never above 2).
className	string	—	Classes for the box; give it a height.