KQ-1475 · TIDE/LINES

Tide Lines

A background of surf seen from a cliff: parallel lines stacked in depth from a horizon to the shore, bunched by perspective, each the water's surface along one depth — three seeded swell trains with peaked crests that shoal as they come in, so the front lines run higher and brighter — with every line hiding the water behind it and foam riding the crests. The pointer is a wind that raises a mound of swell under it, following on the springs.glide constants and arriving on springs.drift, and a press sends in a set: one long wave that rolls to the shore and breaks in a burst of spray. Keyboard focus on a control inside sends a set from behind it.

KQ-1475 · TIDE/LINES

Coldbrook Surf Report

Clean lines all morning

Swell 1.4 m at 12 s, light offshore

36 lines · swell rolling

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/tide-lines

Props

children: React.ReactNode; default —; The content on top of the water: a hero line, a heading, a call to action.
lines: number; default 36; How many lines of water are stacked from the horizon to the shore, 12 to 64.
height: number; default 0.5; How high the swell runs, 0 (glassy) to 1 (big surf).
color: "cobalt" | "signal" | "ink" | "coral" | string; default "cobalt"; The lines' colour: a named token or any CSS colour.
speed: number; default 1; How fast the swell rolls in, 0 (still) to 2.
period: number; default 260; The swell's wavelength along the shore, px at the front line.
foam: number; default 0.6; Foam at the crests and spray where waves break, 0 (none) to 1.
horizon: number; default 0.18; Where the farthest line sits, as a share of the height from the top, 0 to 0.6.
weight: number; default 1.6; The front line's width, px; far lines are finer.
ground: string; default "var(--background)"; The water's ground, behind and between the lines.
interactive: boolean; default true; The pointer raises the swell and a press sends in a set; keyboard focus inside sends one too.
pointerStrength: number; default 0.6; How much the hand raises the swell and how big a set it sends, 0 to 1.
radius: number; default 180; How far the hand's wind reaches, px.
paused: boolean; default false; Hold the water still; the hand and sets still move it.
seed: number; default 1; Seeds the swell, so two seas 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) raising the swell.
onSet: () => void; default —; Fires when a press or keyboard focus sends in a set.
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 water: a hero line, a heading, a call to action.
lines	number	36	How many lines of water are stacked from the horizon to the shore, 12 to 64.
height	number	0.5	How high the swell runs, 0 (glassy) to 1 (big surf).
color	"cobalt" \| "signal" \| "ink" \| "coral" \| string	"cobalt"	The lines' colour: a named token or any CSS colour.
speed	number	1	How fast the swell rolls in, 0 (still) to 2.
period	number	260	The swell's wavelength along the shore, px at the front line.
foam	number	0.6	Foam at the crests and spray where waves break, 0 (none) to 1.
horizon	number	0.18	Where the farthest line sits, as a share of the height from the top, 0 to 0.6.
weight	number	1.6	The front line's width, px; far lines are finer.
ground	string	"var(--background)"	The water's ground, behind and between the lines.
interactive	boolean	true	The pointer raises the swell and a press sends in a set; keyboard focus inside sends one too.
pointerStrength	number	0.6	How much the hand raises the swell and how big a set it sends, 0 to 1.
radius	number	180	How far the hand's wind reaches, px.
paused	boolean	false	Hold the water still; the hand and sets still move it.
seed	number	1	Seeds the swell, so two seas 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) raising the swell.
onSet	() => void	—	Fires when a press or keyboard focus sends in a set.
className	string	"h-full w-full"	Sizes and shapes the box.