KQ-1428 · GLASS/DRIFT

Glass Drift

Seeded glass shards floating in shallow 3D over a soft colour field, as a background with the content on top: each shard wanders, tilts and turns on its own and refracts the field behind it in WebGL2, magnified, shifted by its tilt and bent hard across a bevelled rim where the colours part a little, tinted toward glass, brighter as it turns edge-on, with a crisp rim lit on the side toward the light and a soft shadow beneath. The pointer parts the shards, each moving aside on springs.glide and drifting home on springs.drift, and a press puffs them outward with a little spin before the drift spring brings them back. It never takes focus; keyboard focus on a control inside parts the glass around it and puffs gently.

KQ-1428 · GLASS/DRIFT

Waylight Glass

Light, cut into pieces

Open studio, Thursdays from noon

at rest · 14 shards, lagoon

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/glass-drift

Props

children: React.ReactNode; default —; The content on top of the glass: a hero line, a heading, a call to action.
count: number; default 14; How many shards float over the colour, 3 to 40.
refraction: number; default 0.5; How strongly each shard bends and splits what is behind it, 0 to 1.
palette: "lagoon" | "dawn" | "orchid" | "mono" | readonly string[]; default "lagoon"; A named palette, or your own CSS colours: the wash, then up to three blooms.
size: number; default 0.5; A shard's size, as a share of the box's shorter side (0.15 to 1).
depth: number; default 0.5; How far the shards tilt in depth, 0 (flat to you) to 1.
speed: number; default 1; How fast the colour and the glass drift, 0 (held) to 3.
tint: number; default 0.35; How much the glass tints what it shows, 0 (clear) to 1 (frosted).
edge: number; default 0.7; How bright the shards' edges catch the light, 0 to 1.
interactive: boolean; default true; The pointer and keyboard focus part the shards.
pointerStrength: number; default 0.6; How far the pointer pushes the shards aside, 0 to 1.
pulse: boolean; default true; A press on the glass (not on a control) puffs the shards outward from it.
intro: boolean; default true; The shards float up out of the colour the first time it comes into view.
paused: boolean; default false; Hold the drift still; the pointer can still part the shards.
seed: number; default 1; Seeds the cut of every shard and where it floats.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) parting the shards.
className: string; default —; Sizes and shapes the box; it fills its parent by default (h-full w-full).

Prop	Type	Default	Description
children	React.ReactNode	—	The content on top of the glass: a hero line, a heading, a call to action.
count	number	14	How many shards float over the colour, 3 to 40.
refraction	number	0.5	How strongly each shard bends and splits what is behind it, 0 to 1.
palette	"lagoon" \| "dawn" \| "orchid" \| "mono" \| readonly string[]	"lagoon"	A named palette, or your own CSS colours: the wash, then up to three blooms.
size	number	0.5	A shard's size, as a share of the box's shorter side (0.15 to 1).
depth	number	0.5	How far the shards tilt in depth, 0 (flat to you) to 1.
speed	number	1	How fast the colour and the glass drift, 0 (held) to 3.
tint	number	0.35	How much the glass tints what it shows, 0 (clear) to 1 (frosted).
edge	number	0.7	How bright the shards' edges catch the light, 0 to 1.
interactive	boolean	true	The pointer and keyboard focus part the shards.
pointerStrength	number	0.6	How far the pointer pushes the shards aside, 0 to 1.
pulse	boolean	true	A press on the glass (not on a control) puffs the shards outward from it.
intro	boolean	true	The shards float up out of the colour the first time it comes into view.
paused	boolean	false	Hold the drift still; the pointer can still part the shards.
seed	number	1	Seeds the cut of every shard and where it floats.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) parting the shards.
className	string	—	Sizes and shapes the box; it fills its parent by default (h-full w-full).