KQ-1549 · CAUSTIC/TYPE

Caustic Type

A paragraph laid in the floor of a clear pool: the words stay real DOM text while a WebGL2 canvas draws them as dark tiles in a pale plaster floor seen through moving water, and the light is computed, not painted — the floor's brightness is how hard refraction through a surface of nine seeded waves squeezes the light together, so it gathers into bright, wavering nets that slide across the words with a thin rainbow at their edges. Moving the pointer sends rings across the surface that sweep new nets over the paragraph and a press drops a pebble; resting lets the rings fade back to a slow shimmer. The pool is a focusable group: the arrow keys move a fingertip that stirs the water and Enter or Space drops a pebble.

KQ-1549 · CAUSTIC/TYPE

Coldbrook Lido · reopening

Coldbrook Lido opens for the summer on the first of May. Lanes from six in the morning, the shallow end from nine, and the water kept at twenty-six degrees until September.

calm · move across the water to stir it

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/caustic-type

Props

text: string; default —; The paragraph laid in the pool's floor. Real text: it wraps, selects and reads.
as: "p" | "div" | "h2" | "h3" | "blockquote"; default "p"; The element the text lives in.
depth: number; default 0.5; How deep the pool is, 0 to 1: deeper water focuses the light into finer nets, bends the words further and dims them.
caustics: number; default 0.6; Strength of the light nets, 0 (still water) to 1 (a lively surface).
tint: "lagoon" | "glacier" | "peat" | "night"; default "lagoon"; The water: its colour, the floor, the letter tiles and the light.
waterColor: string; default —; Overrides the water colour, any CSS colour; the floor follows it.
lightColor: string; default —; Overrides the colour of the caustic light.
inkColor: string; default —; Overrides the colour of the letter tiles.
dispersion: number; default 0.35; Thin rainbow fringes along the light nets, 0 to 1.
speed: number; default 1; How fast the surface moves, 0.25 to 2.
tiles: boolean; default true; A faint grid of floor tiles under the words.
interactive: boolean; default true; The pointer and the keyboard disturb the water.
pointerStrength: number; default 0.6; How hard the pointer stirs, 0 to 1.
paused: boolean; default false; Hold the water still.
seed: number; default 1; Seed for the wave directions and phases.
dpr: number; default 2; Device pixel ratio cap for the canvas.
label: string; default "Pool"; Accessible name of the pool.
onStirChange: (stirred: boolean) => void; default —; The water was disturbed (true) or has calmed again (false).
className: string; default —; Size and type; the pool's padding and the light's scale are in em of the text.

Prop	Type	Default	Description
text	string	—	The paragraph laid in the pool's floor. Real text: it wraps, selects and reads.
as	"p" \| "div" \| "h2" \| "h3" \| "blockquote"	"p"	The element the text lives in.
depth	number	0.5	How deep the pool is, 0 to 1: deeper water focuses the light into finer nets, bends the words further and dims them.
caustics	number	0.6	Strength of the light nets, 0 (still water) to 1 (a lively surface).
tint	"lagoon" \| "glacier" \| "peat" \| "night"	"lagoon"	The water: its colour, the floor, the letter tiles and the light.
waterColor	string	—	Overrides the water colour, any CSS colour; the floor follows it.
lightColor	string	—	Overrides the colour of the caustic light.
inkColor	string	—	Overrides the colour of the letter tiles.
dispersion	number	0.35	Thin rainbow fringes along the light nets, 0 to 1.
speed	number	1	How fast the surface moves, 0.25 to 2.
tiles	boolean	true	A faint grid of floor tiles under the words.
interactive	boolean	true	The pointer and the keyboard disturb the water.
pointerStrength	number	0.6	How hard the pointer stirs, 0 to 1.
paused	boolean	false	Hold the water still.
seed	number	1	Seed for the wave directions and phases.
dpr	number	2	Device pixel ratio cap for the canvas.
label	string	"Pool"	Accessible name of the pool.
onStirChange	(stirred: boolean) => void	—	The water was disturbed (true) or has calmed again (false).
className	string	—	Size and type; the pool's padding and the light's scale are in em of the text.