KQ-1207 · PAINT/NUMBERS

Paint by Numbers

An image placeholder that arrives as a paint-by-numbers kit traced from the picture itself: the pixels are cut into regions that follow its edges, each numbered with the nearest of a few paints from its own colours, the outline wipes in, and the regions fill in number order with brush strokes that sweep across them on the kit's own clock, before the paint lifts on the enter ease and the picture resolves through. Hovering a number or a paint pot hatches every region of that colour, and a press paints them all at once with a plip each. The pots are a real toolbar — arrow keys move, focus previews the colour, Enter paints it.

KQ-1207 · PAINT/NUMBERS

Lake Arden loop7.4 km

painting · 30 regions · tap a colour

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/paint-numbers

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 kit has been painted.
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.
speed: number; default 1; How fast the kit is printed and painted, 0.5 to 2.
regions: number; default 30; How many regions the picture is cut into, 12 to 60; the palette grows with it.
numbers: boolean; default true; Print the paint numbers in the regions and on the pots. Off leaves a plain colouring outline.
sound: boolean; default false; Play a plip for each region the visitor paints by hand, pitched by its number. The automatic painting is silent.
disabled: boolean; default false; The kit still paints itself; previews and painting by hand are off.
className: string; default —; Sizes the box; 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 kit has been painted.
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.
speed	number	1	How fast the kit is printed and painted, 0.5 to 2.
regions	number	30	How many regions the picture is cut into, 12 to 60; the palette grows with it.
numbers	boolean	true	Print the paint numbers in the regions and on the pots. Off leaves a plain colouring outline.
sound	boolean	false	Play a plip for each region the visitor paints by hand, pitched by its number. The automatic painting is silent.
disabled	boolean	false	The kit still paints itself; previews and painting by hand are off.
className	string	—	Sizes the box; the default is aspect-[4/3] w-full.