KQ-1804 · ANAGLYPH/CARD

Anaglyph Card

An image card split into two colour channels by a depth map: one WebGL2 pass samples the picture as a left and a right view, each shifted along the tilt by its depth with a short search so edges hold, and feeds them through the two filter colours, while whatever neither filter covers comes from the centred view so the picture at rest is exactly itself. Lean in with the pointer and the channels part in proportion to depth (the near reeds fringe the most, the far sky not at all) as near and far slide against each other and the card leans a few degrees under a soft glare, the tilt following on springs.glide's constants and returning on springs.drift's. A press toggles glasses mode, folding the split shut on springs.snap so only the parallax remains; it is a real toggle button, Enter or Space toggles, arrow keys hold a tilt, and Escape or Home levels the card.

KQ-1804 · ANAGLYPH/CARD

Fernworks · field notes

Lake 7 at dusk, 21:04

split · near reeds fringe most

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/anaglyph-card

Props

children: React.ReactNode; default —; The caption under the picture.
src: string; default —; A picture of your own (same origin, or served with CORS); defaults to a lake at dusk drawn in code.
depthSrc: string; default —; Its depth map, white near and black far. Without one, depth runs from far at the top to near at the bottom.
alt: string; default "A lake below pine ridges at dusk"; What the picture shows, for assistive technology.
depth: number; default 0.6; How far the channels part at full tilt, 0 to 1.
tilt: number; default 0.5; How far the card leans toward the pointer, 0 (flat) to 1.
channels: "red-cyan" | "red-blue" | "green-magenta" | "amber-blue"; default "red-cyan"; The two filter colours.
channelColors: [string, string]; default —; Two filter colours of your own, left eye then right; overrides channels.
parallax: number; default 0.5; How far near and far slide against each other as you tilt, 0 to 1.
convergence: number; default 0.35; The depth that stays put while the rest slides, 0 (far) to 1 (near).
pressed / defaultPressed: boolean; default false; Glasses mode, controlled or initial: the colours folded back into one, only the parallax left.
onPressedChange: (pressed: boolean) => void; default —; Fires from the press or key that toggled glasses mode, with the new state.
glare: boolean; default true; A soft glare that slides across the glass as it leans.
preview: boolean; default true; Lean once when the card first comes into view, so its depth shows before anyone touches it.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Glasses mode"; The toggle's accessible name.
disabled: boolean; default false; Shows the picture but takes no input.
className: string; default "w-full max-w-72"; Sizes the card; the picture keeps 16:9 above the caption.

Prop	Type	Default	Description
children	React.ReactNode	—	The caption under the picture.
src	string	—	A picture of your own (same origin, or served with CORS); defaults to a lake at dusk drawn in code.
depthSrc	string	—	Its depth map, white near and black far. Without one, depth runs from far at the top to near at the bottom.
alt	string	"A lake below pine ridges at dusk"	What the picture shows, for assistive technology.
depth	number	0.6	How far the channels part at full tilt, 0 to 1.
tilt	number	0.5	How far the card leans toward the pointer, 0 (flat) to 1.
channels	"red-cyan" \| "red-blue" \| "green-magenta" \| "amber-blue"	"red-cyan"	The two filter colours.
channelColors	[string, string]	—	Two filter colours of your own, left eye then right; overrides channels.
parallax	number	0.5	How far near and far slide against each other as you tilt, 0 to 1.
convergence	number	0.35	The depth that stays put while the rest slides, 0 (far) to 1 (near).
pressed / defaultPressed	boolean	false	Glasses mode, controlled or initial: the colours folded back into one, only the parallax left.
onPressedChange	(pressed: boolean) => void	—	Fires from the press or key that toggled glasses mode, with the new state.
glare	boolean	true	A soft glare that slides across the glass as it leans.
preview	boolean	true	Lean once when the card first comes into view, so its depth shows before anyone touches it.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Glasses mode"	The toggle's accessible name.
disabled	boolean	false	Shows the picture but takes no input.
className	string	"w-full max-w-72"	Sizes the card; the picture keeps 16:9 above the caption.