KQ-1862 · TIDAL/BORE

Tidal Bore

A river seen from above at an angle at dusk, drawn per pixel in one WebGL2 pass with your content on top: screen points are cast onto the water so the meandering river narrows into a hazy far reach between dark banks, and the water mirrors the dusk sky more at grazing angles, with the low sun's glitter. A single long wave runs upriver against the current, a steep front with its crest and a train of whelps; the low sun shines through the thin crest as a glowing thread, it breaks into lace-white foam at the banks and outer bends, and the next bore enters every interval. The pointer sets the bore's height on springs.glide and leaving eases it back on springs.drift; a click sends a bore at once. The height is a real slider: Up and Down set it, Enter or Space sends a bore, Escape hands it back to the prop.

KQ-1862 · TIDAL/BORE

Coldbrook · estuary evenings

Ride the evening bore.

bore 1 · height 0.60 · every 9 s

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/tidal-bore

Props

height: number; default 0.6; How tall the bore stands, 0 (a ripple) to 1 (a breaking wall). The pointer and keys set it live; leaving returns here.
glow: number; default 0.6; How strongly the crest glows where the low sun shines through it, 0 to 1.
interval: number; default 9; Seconds between one bore and the next, 4 to 20.
current: number; default 0.5; How fast the river runs down toward you, 0 (still) to 1.
meander: number; default 0.6; How hard the river bends, 0 (a straight channel) to 1.
foam: number; default 0.6; How much white water breaks at the banks and bends, 0 to 1.
dusk: number; default 0.5; How late in the evening it is, 0 (golden hour) to 1 (the last light).
sunColor: string; default "oklch(from var(--warn) 0.8 c h)"; The low sun's colour: a pigment at a fixed lightness, so it reads the same in both themes.
waterColor: string; default "var(--accent)"; The water's own tone, any CSS colour; resolved on the element so it follows the theme.
gauge: boolean; default true; Show the tide gauge at the right edge, which reads the bore's height.
children: React.ReactNode; default —; Content above the river: a hero line, a heading, a call to action.
interactive: boolean; default true; The pointer sets the height and a click sends a bore; the keys do both.
paused: boolean; default false; Hold the river and its bores where they are.
label: string; default "Bore height"; Names the height control for assistive technology.
seed: number; default 2; Seeds the river's bends, so two rivers never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onBore: (count: number) => void; default —; Fires when a bore starts upriver, with how many have run so far.
onHeightChange: (height: number) => void; default —; Fires from the pointer or key that set a new height, 0 to 1.
disabled: boolean; default false; Shows the river running but takes no input.
className: string; default "h-56 w-full"; Sizes the box.

Prop	Type	Default	Description
height	number	0.6	How tall the bore stands, 0 (a ripple) to 1 (a breaking wall). The pointer and keys set it live; leaving returns here.
glow	number	0.6	How strongly the crest glows where the low sun shines through it, 0 to 1.
interval	number	9	Seconds between one bore and the next, 4 to 20.
current	number	0.5	How fast the river runs down toward you, 0 (still) to 1.
meander	number	0.6	How hard the river bends, 0 (a straight channel) to 1.
foam	number	0.6	How much white water breaks at the banks and bends, 0 to 1.
dusk	number	0.5	How late in the evening it is, 0 (golden hour) to 1 (the last light).
sunColor	string	"oklch(from var(--warn) 0.8 c h)"	The low sun's colour: a pigment at a fixed lightness, so it reads the same in both themes.
waterColor	string	"var(--accent)"	The water's own tone, any CSS colour; resolved on the element so it follows the theme.
gauge	boolean	true	Show the tide gauge at the right edge, which reads the bore's height.
children	React.ReactNode	—	Content above the river: a hero line, a heading, a call to action.
interactive	boolean	true	The pointer sets the height and a click sends a bore; the keys do both.
paused	boolean	false	Hold the river and its bores where they are.
label	string	"Bore height"	Names the height control for assistive technology.
seed	number	2	Seeds the river's bends, so two rivers never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onBore	(count: number) => void	—	Fires when a bore starts upriver, with how many have run so far.
onHeightChange	(height: number) => void	—	Fires from the pointer or key that set a new height, 0 to 1.
disabled	boolean	false	Shows the river running but takes no input.
className	string	"h-56 w-full"	Sizes the box.