KQ-1578 · PLANKTON/WAKE

Plankton Wake

Night water full of bioluminescent plankton behind your content: move the pointer through it and the water you push blooms blue-green along your wake about 70 ms after you pass, then fades back to black over glowDecay, while the hand drags the water so the lit points drift apart into a soft V. Each plankton spends a charge when it flashes, so a second pass is dimmer until it recovers, and a click sends a ring outward that is drawn only by the plankton it reaches as they flash. Arrow keys send a light of its own through the water on the springs.glide constants, stirring the same wake, and Enter or Space sends a ring from it.

KQ-1578 · PLANKTON/WAKE

Basinworks · Night paddles

Paddle out after dark.

dark water · move through it, or click

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/plankton-wake

Props

children: React.ReactNode; default —; Content laid over the water: a headline, a card, a call to action. It stays fully interactive.
density: number; default 44; How many plankton live in the water, per 100 × 100 px (8 to 80; capped at 3,000 in all).
glowDecay: number; default 1.4; How long a lit plankton takes to fade back to black, in seconds.
hue: number; default 196; The glow's hue in degrees: 150 is sea green, 196 the classic blue-green, 250 violet blue.
water: string; default "oklch(from var(--accent) 0.17 0.035 h)"; The water's colour, any CSS colour. Dark by design in both themes.
wakeRadius: number; default 44; How far either side of the pointer's path the water is stirred, px (held under 30% of the box).
sensitivity: number; default 0.6; How readily a slow hand lights the water, 0 to 1; a fast one always does.
ring: boolean; default true; A click on the water sends a ring of light outward from that point.
ringSpeed: number; default 480; How fast a ring travels, px per second.
ambient: number; default 0.3; Life in the still water, 0 to 1: a slow current and the odd lone flash. 0 holds it perfectly still.
intro: boolean; default true; When it first comes into view, something unseen swims across once and stirs a wake.
interactive: boolean; default true; The pointer stirs the water.
paused: boolean; default false; Hold the water as it is: nothing drifts, glows on or fades.
seed: number; default 7; Seeds where the plankton float and the swimmer's path.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Dark water"; The water's accessible name, for the keyboard's way in.
onPulse: (count: number) => void; default —; A ring was sent, with how many so far.
onGlowChange: (glowing: boolean) => void; default —; The water started or stopped glowing from a disturbance.
disabled: boolean; default false; Nothing stirs and the keyboard's way in is off.
className: string; default "h-56 w-full"; Sizes the water.

Prop	Type	Default	Description
children	React.ReactNode	—	Content laid over the water: a headline, a card, a call to action. It stays fully interactive.
density	number	44	How many plankton live in the water, per 100 × 100 px (8 to 80; capped at 3,000 in all).
glowDecay	number	1.4	How long a lit plankton takes to fade back to black, in seconds.
hue	number	196	The glow's hue in degrees: 150 is sea green, 196 the classic blue-green, 250 violet blue.
water	string	"oklch(from var(--accent) 0.17 0.035 h)"	The water's colour, any CSS colour. Dark by design in both themes.
wakeRadius	number	44	How far either side of the pointer's path the water is stirred, px (held under 30% of the box).
sensitivity	number	0.6	How readily a slow hand lights the water, 0 to 1; a fast one always does.
ring	boolean	true	A click on the water sends a ring of light outward from that point.
ringSpeed	number	480	How fast a ring travels, px per second.
ambient	number	0.3	Life in the still water, 0 to 1: a slow current and the odd lone flash. 0 holds it perfectly still.
intro	boolean	true	When it first comes into view, something unseen swims across once and stirs a wake.
interactive	boolean	true	The pointer stirs the water.
paused	boolean	false	Hold the water as it is: nothing drifts, glows on or fades.
seed	number	7	Seeds where the plankton float and the swimmer's path.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Dark water"	The water's accessible name, for the keyboard's way in.
onPulse	(count: number) => void	—	A ring was sent, with how many so far.
onGlowChange	(glowing: boolean) => void	—	The water started or stopped glowing from a disturbance.
disabled	boolean	false	Nothing stirs and the keyboard's way in is off.
className	string	"h-56 w-full"	Sizes the water.