KQ-1482 · CHROME/POOL

Chrome Pool

A background that is a pool of liquid chrome seen across its surface, with your content on top: a WebGL2 shader meets the pool for every pixel through a tilted camera, takes its slope from five slow analytic swells and reflects a soft studio — a graded cyclorama, a broad key, strip lights and a dark flag — through a fresnel on the metal's tint, so the lights run over it as flowing lines. The pointer resting on it presses a shallow dimple with a raised rim and a press drives it deep; a moving hand leaves its dimples behind, each a spring with springs.recoil's stiffness and `bounce` for its damping, so they spring back past level into a small bump and wobble home. Keyboard focus on a control inside taps a dimple there.

KQ-1482 · CHROME/POOL

Basinworks Foundry

Poured, not pressed

Hand-cast trays · four finishes

chrome · at rest

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/chrome-pool

Props

children: React.ReactNode; default —; The content on top of the metal: a hero line, a heading, a call to action.
tint: "chrome" | "gold" | "rose" | "cobalt" | string; default "chrome"; The metal's colour: a named finish or any CSS colour.
ripple: number; default 0.5; How much the surface swells, 0 (a mirror) to 1.
roughness: number; default 0.25; How soft the reflections are, 0 (mirror sharp) to 1 (satin).
speed: number; default 0.6; How fast the swells move, 0 (held) to 2.
scale: number; default 300; The length of a swell, px at the middle of the frame.
angle: number; default 34; How steeply the pool is seen, degrees (20 grazing to 70 looking down).
interactive: boolean; default true; The pointer and keyboard focus press dimples into the metal.
pointerStrength: number; default 0.6; How deep a press goes, 0 to 1; resting the pointer presses a quarter of it.
radius: number; default 70; A dimple's size where it is pressed, px.
bounce: number; default 0.55; How springy a dimple is coming back, 0 (settles dead) to 1 (wobbles).
paused: boolean; default false; Hold the swells still; dimples still press and spring back.
seed: number; default 1; Seeds the swells' headings and lengths.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onPressChange: (pressed: boolean) => void; default —; Fires when a press drives a dimple in (true) and when it lets go (false).
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 metal: a hero line, a heading, a call to action.
tint	"chrome" \| "gold" \| "rose" \| "cobalt" \| string	"chrome"	The metal's colour: a named finish or any CSS colour.
ripple	number	0.5	How much the surface swells, 0 (a mirror) to 1.
roughness	number	0.25	How soft the reflections are, 0 (mirror sharp) to 1 (satin).
speed	number	0.6	How fast the swells move, 0 (held) to 2.
scale	number	300	The length of a swell, px at the middle of the frame.
angle	number	34	How steeply the pool is seen, degrees (20 grazing to 70 looking down).
interactive	boolean	true	The pointer and keyboard focus press dimples into the metal.
pointerStrength	number	0.6	How deep a press goes, 0 to 1; resting the pointer presses a quarter of it.
radius	number	70	A dimple's size where it is pressed, px.
bounce	number	0.55	How springy a dimple is coming back, 0 (settles dead) to 1 (wobbles).
paused	boolean	false	Hold the swells still; dimples still press and spring back.
seed	number	1	Seeds the swells' headings and lengths.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onPressChange	(pressed: boolean) => void	—	Fires when a press drives a dimple in (true) and when it lets go (false).
className	string	"h-full w-full"	Sizes and shapes the box.