KQ-1841 · DICHROIC/WALL

Dichroic Wall

A wall of dichroic glass tiles whose colours are computed from thin-film interference: each tile passes one hue and reflects its complement, and both slide with the angle you see it from, so as the pointer (your eye) moves the tiles shift colour, the eye following on springs.glide. Each tile reads where you stood a moment ago in proportion to its distance, so a change rolls across the wall as a travelling wave, and the tiles are set slightly askew so neighbours never quite match; a click, Enter or Space flashes the wall white for a beat in a ring from the click. Arrow keys move the eye from a full-surface button under the content, Escape stands you back in the centre, and the first sight sweeps the eye across once on springs.drift.

KQ-1841 · DICHROIC/WALL

Fernworks · glass

Light, bent on purpose

See the collection

move across the glass · prism film · 5 rows

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/dichroic-wall

Props

children: React.ReactNode; default —; Content on top of the glass: a headline, a caption card, a call to action.
tiles: number; default 5; How many tiles fit the wall's shorter side, 3 to 12: fewer rows make larger tiles.
shift: number; default 0.6; How far a tile's colour swings with the angle you see it from, 0 to 1.
gap: number; default 3; The grout between tiles, px, 0 to 12.
radius: number; default 3; A tile's corner radius, px.
askew: number; default 0.4; How far each tile is set off square in its bed, 0 (a perfect grid) to 1 (visibly hand-laid).
film: "prism" | "lagoon" | "orchid" | "frost"; default "prism"; The coating: a mixed prism, teal and amber, orchid and green, or a pale frost.
backlight: number; default 0.6; How much light comes through the glass rather than off it, 0 to 1: high shows the transmitted colours, low their complements.
waveSpeed: number; default 12; How fast a change of angle travels across the wall, tiles per second.
flash: number; default 0.85; How bright a click's flash is, 0 (no flash) to 1 (full white).
interactive: boolean; default true; The pointer and the keys move where you stand; off, the wall holds its view.
sweep: boolean; default true; On first sight the eye crosses the wall once, so a wave of colour runs over it.
drift: boolean; default false; With no pointer on it, the eye wanders slowly by itself (the wall never rests).
paused: boolean; default false; Hold the wall still: nothing animates until it is unpaused.
seed: number; default 1; Seeds every tile's film, turn and tilt.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Dichroic glass wall"; The accessible name of the wall's surface button.
onFlash: () => void; default —; Fires when a click, Enter or Space flashes the wall.
disabled: boolean; default false; No pointer, keys or flash; the wall rests at its centre view.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	Content on top of the glass: a headline, a caption card, a call to action.
tiles	number	5	How many tiles fit the wall's shorter side, 3 to 12: fewer rows make larger tiles.
shift	number	0.6	How far a tile's colour swings with the angle you see it from, 0 to 1.
gap	number	3	The grout between tiles, px, 0 to 12.
radius	number	3	A tile's corner radius, px.
askew	number	0.4	How far each tile is set off square in its bed, 0 (a perfect grid) to 1 (visibly hand-laid).
film	"prism" \| "lagoon" \| "orchid" \| "frost"	"prism"	The coating: a mixed prism, teal and amber, orchid and green, or a pale frost.
backlight	number	0.6	How much light comes through the glass rather than off it, 0 to 1: high shows the transmitted colours, low their complements.
waveSpeed	number	12	How fast a change of angle travels across the wall, tiles per second.
flash	number	0.85	How bright a click's flash is, 0 (no flash) to 1 (full white).
interactive	boolean	true	The pointer and the keys move where you stand; off, the wall holds its view.
sweep	boolean	true	On first sight the eye crosses the wall once, so a wave of colour runs over it.
drift	boolean	false	With no pointer on it, the eye wanders slowly by itself (the wall never rests).
paused	boolean	false	Hold the wall still: nothing animates until it is unpaused.
seed	number	1	Seeds every tile's film, turn and tilt.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Dichroic glass wall"	The accessible name of the wall's surface button.
onFlash	() => void	—	Fires when a click, Enter or Space flashes the wall.
disabled	boolean	false	No pointer, keys or flash; the wall rests at its centre view.
className	string	"h-full w-full"	Sizes and shapes the box.