KQ-1889 · WING/SCALES

Wing Scales

A specimen of an invented blue butterfly drawn per pixel in one WebGL2 pass, zoomable from the whole insect down to the ridges of a single scale: rows of toothed scales laid like shingles, coloured by a thin-film term on their ridges, so the blue slides toward green and violet as the pointer rocks the specimen on a critically damped spring with the drift constants. The wheel (once focused), a pinch, double-click or the keys zoom about the pointer on the glide constants in log space; zoomed in, a drag pans 1:1 and a release throws by projection, and while you look the scales breathe in a slow wave that settles when you leave. Plus and minus zoom, Home and End jump to the wing or the ridges, Left and Right rock it, Shift with an arrow pans, and Escape returns to the whole wing.

KQ-1889 · WING/SCALES

Coldbrook azure

Fernworks Collection · No. 14

×1.0 · whole wing

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/wing-scales

Props

zoom: number; default 1; Magnification shown, 1 (the whole wing) to maxZoom (the ridges of one scale); a new value glides the view there.
onZoomChange: (zoom: number) => void; default —; Fires from the wheel, pinch, drag or key that changed the magnification.
maxZoom: number; default 90; The deepest magnification, 8 to 160.
iridescence: number; default 0.75; How strongly the ridges shine, 0 (dull pigment brown) to 1 (the full blue-green play).
tilt: number; default 0.6; How far the wing rocks toward the pointer, 0 (held still) to 1 (26° each way).
film: number; default 420; Thickness of the ridges' film in nanometres, 300 to 560: the colour family (gold, violet, blue, green).
ground: string; default "oklch(0.26 0.03 45)"; The pigment under the film, any CSS colour.
markings: "band" | "eyespot" | "plain"; default "band"; The pattern of pigment scales: a spotted outer band, an eyespot on each hindwing, or plain.
breathe: number; default 0.5; How far the scales lift as the wing breathes while you look, 0 to 1.
wheel: "focus" | "always" | "off"; default "focus"; When a plain wheel zooms: once the wing has focus (or with Ctrl or ⌘), always, or never. Pinch always zooms.
seed: number; default 7; Seeds the scales' small irregularities.
label: string; default "Butterfly wing"; Names the specimen for assistive technology.
paused: boolean; default false; Holds the scales flat: no breathing.
disabled: boolean; default false; Shows the wing but takes no gestures or keys.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
className: string; default —; Sizes the box (default h-56 w-full); the insect is fitted inside it.

Prop	Type	Default	Description
zoom	number	1	Magnification shown, 1 (the whole wing) to maxZoom (the ridges of one scale); a new value glides the view there.
onZoomChange	(zoom: number) => void	—	Fires from the wheel, pinch, drag or key that changed the magnification.
maxZoom	number	90	The deepest magnification, 8 to 160.
iridescence	number	0.75	How strongly the ridges shine, 0 (dull pigment brown) to 1 (the full blue-green play).
tilt	number	0.6	How far the wing rocks toward the pointer, 0 (held still) to 1 (26° each way).
film	number	420	Thickness of the ridges' film in nanometres, 300 to 560: the colour family (gold, violet, blue, green).
ground	string	"oklch(0.26 0.03 45)"	The pigment under the film, any CSS colour.
markings	"band" \| "eyespot" \| "plain"	"band"	The pattern of pigment scales: a spotted outer band, an eyespot on each hindwing, or plain.
breathe	number	0.5	How far the scales lift as the wing breathes while you look, 0 to 1.
wheel	"focus" \| "always" \| "off"	"focus"	When a plain wheel zooms: once the wing has focus (or with Ctrl or ⌘), always, or never. Pinch always zooms.
seed	number	7	Seeds the scales' small irregularities.
label	string	"Butterfly wing"	Names the specimen for assistive technology.
paused	boolean	false	Holds the scales flat: no breathing.
disabled	boolean	false	Shows the wing but takes no gestures or keys.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
className	string	—	Sizes the box (default h-56 w-full); the insect is fitted inside it.