KQ-1587 · MICA/DRIFT

Mica Drift

Fine mica flakes suspended in a dark liquid, as a background with your content above: each flake is a thin plate that sinks slowly, drifts on a seeded current and rocks as it falls, lined up with the liquid's flow so neighbours face nearly the same way, and every frame its normal is checked against the half vector between the light and the eye — a broad sheen brightens a whole band of flakes and a tight lobe makes single faces flash with a four-point flare. The light rests far off at lightAngle; bring the pointer in and it comes close on the springs.drift constants, so the angle each flake needs changes across the field and a wave of glints follows the hand, and a click stirs a swirl that the liquid's viscosity takes back. The keyboard handle turns the light with the arrow keys and stirs with Enter or Space.

KQ-1587 · MICA/DRIFT

Basinworks · mineral bath

Mica, suspended.

Fine mineral flakes that catch the light as they turn.

light from 135° · move over the bath to carry 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/mica-drift

Props

children: React.ReactNode; default —; Content above the liquid, in a readable layer; it keeps its own focus and clicks.
flakeCount: number; default 1200; Flakes in a 760 × 232 box; scaled by the box's area and held between 120 and 2400.
lightAngle: number; default 135; Where the light comes from when the pointer is away, degrees: 0 from the right, 90 from above. The keyboard turns it from here.
viscosity: number; default 0.5; How thick the liquid is, 0 to 1: thin and lively to slow, heavy settling; it also sets how fast a stir dies and how quickly flakes line up again.
flakeSize: number; default 1; Flake size, 0.5 to 2.
shimmer: number; default 0.8; How bright a flake flashes, 0 to 1.
glintColor: string; default "color-mix(in oklab, var(--warn) 22%, white)"; The flash's colour, any CSS colour.
flakeColor: string; default "oklch(from var(--warn) 0.72 0.045 h)"; The flakes' own dim colour (a pigment, the same in both themes).
liquid: string; default "color-mix(in oklab, var(--accent) 16%, black)"; The liquid: fixed art, dark in both themes. Also the box's CSS background, so the server-rendered frame is already the liquid.
depth: number; default 0.6; How much depth the field has, 0 (flat) to 1: far flakes smaller, fainter and slower.
interactive: boolean; default true; The pointer carries the light, a click stirs, and the keyboard handle is present.
stir: number; default 1; Strength of a click's swirl, 0 to 2.
paused: boolean; default false; Hold every flake where it is; the loop stops.
seed: number; default 11; Seeds every flake.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Mica in liquid"; Name of the keyboard handle that turns the light.
onLightAngleChange: (angle: number) => void; default —; Fires when the keyboard turns the light, with its new angle in degrees.
className: string; default —; Sizes and shapes the box; the liquid fills it edge to edge.

Prop	Type	Default	Description
children	React.ReactNode	—	Content above the liquid, in a readable layer; it keeps its own focus and clicks.
flakeCount	number	1200	Flakes in a 760 × 232 box; scaled by the box's area and held between 120 and 2400.
lightAngle	number	135	Where the light comes from when the pointer is away, degrees: 0 from the right, 90 from above. The keyboard turns it from here.
viscosity	number	0.5	How thick the liquid is, 0 to 1: thin and lively to slow, heavy settling; it also sets how fast a stir dies and how quickly flakes line up again.
flakeSize	number	1	Flake size, 0.5 to 2.
shimmer	number	0.8	How bright a flake flashes, 0 to 1.
glintColor	string	"color-mix(in oklab, var(--warn) 22%, white)"	The flash's colour, any CSS colour.
flakeColor	string	"oklch(from var(--warn) 0.72 0.045 h)"	The flakes' own dim colour (a pigment, the same in both themes).
liquid	string	"color-mix(in oklab, var(--accent) 16%, black)"	The liquid: fixed art, dark in both themes. Also the box's CSS background, so the server-rendered frame is already the liquid.
depth	number	0.6	How much depth the field has, 0 (flat) to 1: far flakes smaller, fainter and slower.
interactive	boolean	true	The pointer carries the light, a click stirs, and the keyboard handle is present.
stir	number	1	Strength of a click's swirl, 0 to 2.
paused	boolean	false	Hold every flake where it is; the loop stops.
seed	number	11	Seeds every flake.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Mica in liquid"	Name of the keyboard handle that turns the light.
onLightAngleChange	(angle: number) => void	—	Fires when the keyboard turns the light, with its new angle in degrees.
className	string	—	Sizes and shapes the box; the liquid fills it edge to edge.