KQ-1209 · JIGSAW/SET

Jigsaw

An image placeholder that puts the picture together as a jigsaw: real interlocking tabs, each edge cut once so neighbours share it, clipped from the picture itself and tipped out across a tray where they land on springs.recoil. Pieces go home edges first — lifting on springs.snap, travelling and unwinding on springs.glide, dropping in on springs.flick with a shine round the edge — and the last one hovers over its slot until the picture is ready, then lands on springs.recoil as the seams fade. Any loose piece can be dragged 1:1 and is pulled into its slot on springs.snap with the release velocity; the pieces are a roving group of buttons, so arrow keys move between them and Enter places one.

KQ-1209 · JIGSAW/SET

Greenhouse no. 43.2 × 2.4 m

assembling · 0 of 16 in place

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/jigsaw-set

Props

alt: string; default —; What the picture shows. Always its accessible name: the picture's role="img" label, or the img's own alt for src.
src: string; default —; The picture's address. Without it, children is the picture.
children: ReactNode; default —; The finished picture when there is no src: an inline SVG or an image, sized to fill the box.
ready: boolean; default —; Controlled: the picture may show. Uncontrolled, it is ready once the picture exists (a src has loaded or failed) and the board is all but done and the last piece has hovered.
progress: number; default —; 0 to 1, while not ready: how far the effect may come, for a determinate load.
onReady: () => void; default —; Fires once per load, when the effect has resolved and the picture is whole.
onPlace: (placed: number, total: number) => void; default —; Every piece that locks into place, by hand or not, with the count so far.
speed: number; default 1; How fast the pieces arrive and are put together, 0.5 to 2.
pieces: "3" | "4" | "5"; default "4"; The cut: 3 × 3, 4 × 4 or 5 × 5 pieces.
scatter: number; default 0.6; How far from home, and how turned, the tipped-out pieces lie, 0 (just above their slots) to 1 (anywhere in the tray, up to 28°).
sound: boolean; default false; Play a snap as a piece placed by hand is pulled in and a click as it locks. The automatic assembly is silent.
disabled: boolean; default false; The puzzle still assembles itself; pieces cannot be moved.
className: string; default —; Sizes the tray; the default is aspect-[4/3] w-full.

Prop	Type	Default	Description
alt	string	—	What the picture shows. Always its accessible name: the picture's role="img" label, or the img's own alt for src.
src	string	—	The picture's address. Without it, children is the picture.
children	ReactNode	—	The finished picture when there is no src: an inline SVG or an image, sized to fill the box.
ready	boolean	—	Controlled: the picture may show. Uncontrolled, it is ready once the picture exists (a src has loaded or failed) and the board is all but done and the last piece has hovered.
progress	number	—	0 to 1, while not ready: how far the effect may come, for a determinate load.
onReady	() => void	—	Fires once per load, when the effect has resolved and the picture is whole.
onPlace	(placed: number, total: number) => void	—	Every piece that locks into place, by hand or not, with the count so far.
speed	number	1	How fast the pieces arrive and are put together, 0.5 to 2.
pieces	"3" \| "4" \| "5"	"4"	The cut: 3 × 3, 4 × 4 or 5 × 5 pieces.
scatter	number	0.6	How far from home, and how turned, the tipped-out pieces lie, 0 (just above their slots) to 1 (anywhere in the tray, up to 28°).
sound	boolean	false	Play a snap as a piece placed by hand is pulled in and a click as it locks. The automatic assembly is silent.
disabled	boolean	false	The puzzle still assembles itself; pieces cannot be moved.
className	string	—	Sizes the tray; the default is aspect-[4/3] w-full.