KQ-1562 · PRISM/GATE

Prism Gate

A rail of pictures runs through a glass prism at the centre of the frame: outside the glass they wear a quiet monochrome tone, behind it they are in colour, cut exactly at its faces, so a picture sliding in takes its colour from the leading edge. While it moves through, the glass splits it into colour fringes — three channel copies isolated with colour matrices and screen-blended back over black, separating along the direction of travel by `dispersion` — and they close up as it centres and holds in resolved colour. Drag follows 1:1 and rubber-bands at the ends, a flick settles on the nearest picture on springs.glide with the release velocity; Left and Right step, Page keys step three, Home and End go to the ends, and a click brings a picture to the glass.

KQ-1562 · PRISM/GATE

Basinworks print room · field prints

in the gate · 3 of 9 · kelp forest

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/prism-gate

Props

items: PrismGateItem[]; default defaultPrismGateItems; The pictures on the rail: { src?, alt, caption?, art? }.
value / defaultValue: number; default 0; The picture held in the glass, controlled or initial.
onValueChange: (index: number) => void; default —; Fires from the drag, wheel, key or click that brought a new picture into the glass.
dispersion: number; default 0.6; How far the glass splits a passing picture into colour fringes, 0 to 1; also the strength of the spectral glint on its faces.
gateWidth: number; default 150; Width of the glass column, px; the held picture fits inside it.
sideTone: "graphite" | "sepia" | "cyano" | "paper"; default "graphite"; The monochrome the pictures wear outside the glass.
gap: number; default 14; Gap between pictures on the rail, px.
ratio: number; default 0.8; Picture width over height.
fade: number; default 0.45; How much the pictures dim and shrink toward the frame's edges, 0 to 1.
glassTint: string; default "var(--accent-bright)"; The glass's faint tint.
captions: boolean; default true; Show the held picture's caption under the glass.
wheel: boolean; default true; The wheel moves the rail once the visitor has rested on it or tabbed in, and lets the page scroll at either end.
height: number; default 200; Height of the frame, px.
label: string; default "Pictures"; The rail's accessible name.
disabled: boolean; default false; Stops every gesture and key.
className: string; default —; Classes for the outer frame.

Prop	Type	Default	Description
items	PrismGateItem[]	defaultPrismGateItems	The pictures on the rail: { src?, alt, caption?, art? }.
value / defaultValue	number	0	The picture held in the glass, controlled or initial.
onValueChange	(index: number) => void	—	Fires from the drag, wheel, key or click that brought a new picture into the glass.
dispersion	number	0.6	How far the glass splits a passing picture into colour fringes, 0 to 1; also the strength of the spectral glint on its faces.
gateWidth	number	150	Width of the glass column, px; the held picture fits inside it.
sideTone	"graphite" \| "sepia" \| "cyano" \| "paper"	"graphite"	The monochrome the pictures wear outside the glass.
gap	number	14	Gap between pictures on the rail, px.
ratio	number	0.8	Picture width over height.
fade	number	0.45	How much the pictures dim and shrink toward the frame's edges, 0 to 1.
glassTint	string	"var(--accent-bright)"	The glass's faint tint.
captions	boolean	true	Show the held picture's caption under the glass.
wheel	boolean	true	The wheel moves the rail once the visitor has rested on it or tabbed in, and lets the page scroll at either end.
height	number	200	Height of the frame, px.
label	string	"Pictures"	The rail's accessible name.
disabled	boolean	false	Stops every gesture and key.
className	string	—	Classes for the outer frame.