KQ-1787 · CREST/FRINGE

Crest Fringe

A glass tank seen side-on, a slow train of soft Stokes waves inside, lit from behind by a broad lamp: where each crest curves it acts as a prism, seven wavelengths each brightest where the surface slope meets the lamp at that colour's own angle, so every wave's edge splits into a thin spectrum that runs along the wave and drops a faint rainbow fan into the water beneath it. The lamp's height is the light's angle and the component's value — a hovering mouse or a tapping finger sets it and the displayed angle eases there on the springs.glide constants, sliding the fringes from the back slope over the crest to the front. The lamp rail is a real slider: arrows move it 2°, Page keys 10°, Home and End to the ends.

KQ-1787 · CREST/FRINGE

Basinworks Aquarium · Gallery 4

Light, bent by water.

lamp 8° above · 3 crests · fringes sliding along the waves

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/crest-fringe

Props

children: React.ReactNode; default —; Content in the tank's air above the water: a hero line, a caption. It stays fully interactive.
waves: number; default 3; How many crests stand across the tank, 1 (long rollers) to 6 (a choppy train).
dispersion: number; default 0.55; How far each crest splits the light, 0 (one white edge) to 1 (a wide rainbow fan).
speed: number; default 0.35; How fast the waves roll, 0 (still water) to 1 (brisk).
swell: number; default 0.5; How tall the waves stand, 0 to 1.
level: number; default 0.5; How much of the tank is water, 0.25 to 0.8.
lightAngle / defaultLightAngle: number; default 8; The lamp's angle behind the tank in degrees, −30 (below) to 30 (above); controlled or uncontrolled.
onLightAngleChange: (degrees: number) => void; default —; Fires from the hover, tap, drag or key that moved the lamp, with whole degrees.
followPointer: boolean; default true; A hovering mouse or pen sets the lamp's height; a finger taps it there.
glow: number; default 0.6; How strongly the lamp lights the tank from behind, 0 to 1.
waterColor: string; default a blue from the accent token (light-dark); The water, any CSS colour; it deepens toward the floor.
airColor: string; default a pale or night tint of the accent token (light-dark); The backlit air above the water, any CSS colour.
lightColor: string; default a near-white from the accent hue; The lamp's light, any CSS colour.
paused: boolean; default false; Hold the waves where they are.
seed: number; default 1; Seeds the phase of the two wave trains.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Lamp height"; The lamp control's accessible name.
disabled: boolean; default false; The lamp does not move.
className: string; default —; Sizes the tank; it fills its parent by default.

Prop	Type	Default	Description
children	React.ReactNode	—	Content in the tank's air above the water: a hero line, a caption. It stays fully interactive.
waves	number	3	How many crests stand across the tank, 1 (long rollers) to 6 (a choppy train).
dispersion	number	0.55	How far each crest splits the light, 0 (one white edge) to 1 (a wide rainbow fan).
speed	number	0.35	How fast the waves roll, 0 (still water) to 1 (brisk).
swell	number	0.5	How tall the waves stand, 0 to 1.
level	number	0.5	How much of the tank is water, 0.25 to 0.8.
lightAngle / defaultLightAngle	number	8	The lamp's angle behind the tank in degrees, −30 (below) to 30 (above); controlled or uncontrolled.
onLightAngleChange	(degrees: number) => void	—	Fires from the hover, tap, drag or key that moved the lamp, with whole degrees.
followPointer	boolean	true	A hovering mouse or pen sets the lamp's height; a finger taps it there.
glow	number	0.6	How strongly the lamp lights the tank from behind, 0 to 1.
waterColor	string	a blue from the accent token (light-dark)	The water, any CSS colour; it deepens toward the floor.
airColor	string	a pale or night tint of the accent token (light-dark)	The backlit air above the water, any CSS colour.
lightColor	string	a near-white from the accent hue	The lamp's light, any CSS colour.
paused	boolean	false	Hold the waves where they are.
seed	number	1	Seeds the phase of the two wave trains.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Lamp height"	The lamp control's accessible name.
disabled	boolean	false	The lamp does not move.
className	string	—	Sizes the tank; it fills its parent by default.