KQ-1247 · QUILT/GRID

Quilt Grid

A backdrop sewn from twelve classic quilt blocks — half-square triangles, pinwheels, flying geese, log cabins, Ohio stars — in printed fabrics with seams and running stitches, drawn in SVG and re-coloured by the theme. Waves re-stitch it from the pointer: ring by ring on a cascade delay, each block either turns a quarter turn on the snap spring or trades places with its outward neighbour on the glide spring, lifting with a soft shadow mid-move and landing flat, while a click re-stitches with a wave where half the blocks swap and a gentle ambient wave starts somewhere every few seconds. The keyboard path is a role="application" surface where arrow keys move a stitched marker and turn the blocks round it and Enter or Space re-stitch from it, announced once.

KQ-1247 · QUILT/GRID

Fieldline Quilt Guild

Winter quilt show

Bring a block, leave with a quilt

quilt at rest · hover to turn, click to re-stitch

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/quilt-grid

Props

blocks: number; default 10; Blocks across the width, 6 to 16. A block is never drawn smaller than 32px, so a narrow quilt has fewer; the motifs stay seeded by cell when it is re-cut.
wave: number; default 0.5; How far a wave carries, 0 to 1: the block and its four neighbours at 0, the whole quilt at 1. Ambient waves carry half as far. A change sends one wave from the middle at the new reach.
palette: "farm" | "sea" | "candy"; default "farm"; The fabrics, as pigments whose lightness follows the theme (full dye on light, dimmed on dark). A change re-dyes the quilt as a wave from the centre.
seed: number; default 1; Which quilt: every block's motif, fabrics, print and starting turn follow from it, the same on the server and the client.
label: string; default "Patchwork quilt"; The accessible name of the keyboard surface.
onWave: (wave: QuiltGridWave) => void; default —; A hover, an arrow key or a re-stitch started a wave: its origin block (col, row from 0), how many blocks turned and swapped, and press: true for a re-stitch. Ambient waves are not reported.
disabled: boolean; default false; Ambient only: the quilt ignores the pointer and the keyboard and leaves the tab order.
children: React.ReactNode; default —; What sits on the quilt — a hero, a heading — in a layer above it. Presses on its own controls never start a wave.
className: string; default —; Classes for the root, which fills its container (h-full w-full); set its size and radius here.

Prop	Type	Default	Description
blocks	number	10	Blocks across the width, 6 to 16. A block is never drawn smaller than 32px, so a narrow quilt has fewer; the motifs stay seeded by cell when it is re-cut.
wave	number	0.5	How far a wave carries, 0 to 1: the block and its four neighbours at 0, the whole quilt at 1. Ambient waves carry half as far. A change sends one wave from the middle at the new reach.
palette	"farm" \| "sea" \| "candy"	"farm"	The fabrics, as pigments whose lightness follows the theme (full dye on light, dimmed on dark). A change re-dyes the quilt as a wave from the centre.
seed	number	1	Which quilt: every block's motif, fabrics, print and starting turn follow from it, the same on the server and the client.
label	string	"Patchwork quilt"	The accessible name of the keyboard surface.
onWave	(wave: QuiltGridWave) => void	—	A hover, an arrow key or a re-stitch started a wave: its origin block (col, row from 0), how many blocks turned and swapped, and press: true for a re-stitch. Ambient waves are not reported.
disabled	boolean	false	Ambient only: the quilt ignores the pointer and the keyboard and leaves the tab order.
children	React.ReactNode	—	What sits on the quilt — a hero, a heading — in a layer above it. Presses on its own controls never start a wave.
className	string	—	Classes for the root, which fills its container (h-full w-full); set its size and radius here.