KQ-1788 · BEADWORK/LOOM

Beadwork Loom

A panel of glass seed beads woven on a loom — wooden beams, warp threads between every column — whose beads take their colour from a moving picture (a slow wave, a seascape with a low sun and rolling swell, a turning flower, or any image or video), so the beadwork plays like a soft low-resolution screen, every bead shaded as a little glass barrel with its own round highlight. Each bead is also a node on a spring lattice, home on the springs.recoil constants and linked to its four neighbours: a drag grabs the warp under the finger 1:1, and on release it springs back past home in two bounces while the ripple runs along the rows, the picture bending with the beads and every highlight rolling with its bead. A tap, Space or Enter plays and pauses the picture; arrow keys tug the warp at the needle and let it go.

KQ-1788 · BEADWORK/LOOM

Fernworks Loom Studio

Low tide at Coldbrook

playing · tide · drag to tug the warp, tap to pause

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/beadwork-loom

Props

motif: "wave" | "tide" | "bloom"; default "tide"; The picture woven in when there is no src: slow diagonal bands, a seascape with a low sun, or a turning flower.
src: string; default —; An image or video to weave instead of the motif (videos by file extension: mp4, webm, ogv, mov).
colors: string[]; default six pigments from the tokens; The bead box, up to six CSS colours from dark to light-and-warm; motifs are painted from it.
snap: boolean; default false; Every bead takes the nearest colour in the bead box, as a real beadwork chart would.
beadSize: number; default 10; A bead's height, px (6 to 16).
sheen: number; default 0.6; How glassy the beads are: the strength of each bead's own round highlight, 0 to 1.
spacing: number; default 2; The gap between columns where the warp threads show, px (0.5 to 5).
speed: number; default 0.4; How fast the picture moves, 0 to 1.
tension: number; default 0.5; How taut the warp is, 0 (loose, long ripples) to 1 (taut, quick ones).
playing / defaultPlaying: boolean; default true; Whether the picture plays; controlled or uncontrolled.
onPlayingChange: (playing: boolean) => void; default —; Fires from the tap or key that played or paused the picture.
threadColor: string; default from the ink token; The warp threads, any CSS colour.
frameColor: string; default a wood tone from the warn token; The loom's beams, any CSS colour.
interactive: boolean; default true; Dragging tugs the warp; a mouse lifts the sheen where it hovers.
seed: number; default 1; Seeds each bead's small differences of tone and size.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Beadwork panel"; The panel's accessible name; say what is woven.
disabled: boolean; default false; No tugging and no play or pause.
className: string; default —; Sizes the loom; it fills its parent by default.

Prop	Type	Default	Description
motif	"wave" \| "tide" \| "bloom"	"tide"	The picture woven in when there is no src: slow diagonal bands, a seascape with a low sun, or a turning flower.
src	string	—	An image or video to weave instead of the motif (videos by file extension: mp4, webm, ogv, mov).
colors	string[]	six pigments from the tokens	The bead box, up to six CSS colours from dark to light-and-warm; motifs are painted from it.
snap	boolean	false	Every bead takes the nearest colour in the bead box, as a real beadwork chart would.
beadSize	number	10	A bead's height, px (6 to 16).
sheen	number	0.6	How glassy the beads are: the strength of each bead's own round highlight, 0 to 1.
spacing	number	2	The gap between columns where the warp threads show, px (0.5 to 5).
speed	number	0.4	How fast the picture moves, 0 to 1.
tension	number	0.5	How taut the warp is, 0 (loose, long ripples) to 1 (taut, quick ones).
playing / defaultPlaying	boolean	true	Whether the picture plays; controlled or uncontrolled.
onPlayingChange	(playing: boolean) => void	—	Fires from the tap or key that played or paused the picture.
threadColor	string	from the ink token	The warp threads, any CSS colour.
frameColor	string	a wood tone from the warn token	The loom's beams, any CSS colour.
interactive	boolean	true	Dragging tugs the warp; a mouse lifts the sheen where it hovers.
seed	number	1	Seeds each bead's small differences of tone and size.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Beadwork panel"	The panel's accessible name; say what is woven.
disabled	boolean	false	No tugging and no play or pause.
className	string	—	Sizes the loom; it fills its parent by default.