KQ-1881 · PEG/MIGRATION

Peg Migration

A backlit pegboard whose translucent coloured pegs glow with the light behind the board and make a picture: a drawn one, a word in a 5 × 7 peg alphabet, or any image reduced to pegs. To change pictures the pegs migrate: pegs already right stay put, the rest are matched to the nearest hole that needs their colour and travel there hole to hole in up to five short arcs, leaving the light and casting a shadow as they lift and landing with a flash and the springs.recoil squash, their departures staggered by distance from where you clicked so the board changes in a wave while spare pegs hop off the nearer side and new ones hop in. A click, Enter, Space or Right shows the next picture, Left the previous, and Home and End the first and last.

KQ-1881 · PEG/MIGRATION

picture 1 of 4 · open · click the board or press → for the next

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/peg-migration

Props

images: { alt: string; src?: string; text?: string; color?: number; draw?: (u: number, v: number, aspect: number) => number }[]; default a sun on the sea, a koi, a moon over a ridge, a tulip; The pictures, in order: an image reduced to pegs, a word in the peg alphabet, or a drawing function returning a colour index (or -1) for each hole.
value / defaultValue: number; default — / 0; The picture showing, controlled or initial.
onValueChange: (index: number) => void; default —; Fires from the click or key that asked for another picture.
pitch: number; default 13; Distance between holes, px (9 to 21): a fine board to a chunky toy.
hopSpeed: number; default 1; How quickly pegs hop, 0.5 to 2.
glow: number; default 0.6; How far each peg's light blooms around it, 0 to 1.
colors: string[]; default seven pigments from the tokens; The peg colours, any CSS colours; pictures index into them.
board: string; default a near-black pigment; The board's colour, any CSS colour.
hopHeight: number; default 0.5; How high pegs arc as they hop, 0 to 1.
spread: number; default 0.5; How long the wave takes to cross the board, 0 (all at once) to 1 (a slow sweep).
interval: number; default 0; Moves to the next picture on its own every so many ms while on screen and not hovered or focused; 0 never.
seed: number; default 1; Seeds the small differences in each peg's timing.
sound: boolean; default false; A tick as each peg lands, pitched by its colour. Off unless asked for.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Pegboard"; The board's accessible name.
disabled: boolean; default false; No changing pictures.
className: string; default —; Sizes the board; 3:1 and the full width by default.

Prop	Type	Default	Description
images	{ alt: string; src?: string; text?: string; color?: number; draw?: (u: number, v: number, aspect: number) => number }[]	a sun on the sea, a koi, a moon over a ridge, a tulip	The pictures, in order: an image reduced to pegs, a word in the peg alphabet, or a drawing function returning a colour index (or -1) for each hole.
value / defaultValue	number	— / 0	The picture showing, controlled or initial.
onValueChange	(index: number) => void	—	Fires from the click or key that asked for another picture.
pitch	number	13	Distance between holes, px (9 to 21): a fine board to a chunky toy.
hopSpeed	number	1	How quickly pegs hop, 0.5 to 2.
glow	number	0.6	How far each peg's light blooms around it, 0 to 1.
colors	string[]	seven pigments from the tokens	The peg colours, any CSS colours; pictures index into them.
board	string	a near-black pigment	The board's colour, any CSS colour.
hopHeight	number	0.5	How high pegs arc as they hop, 0 to 1.
spread	number	0.5	How long the wave takes to cross the board, 0 (all at once) to 1 (a slow sweep).
interval	number	0	Moves to the next picture on its own every so many ms while on screen and not hovered or focused; 0 never.
seed	number	1	Seeds the small differences in each peg's timing.
sound	boolean	false	A tick as each peg lands, pitched by its colour. Off unless asked for.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Pegboard"	The board's accessible name.
disabled	boolean	false	No changing pictures.
className	string	—	Sizes the board; 3:1 and the full width by default.