KQ-1203 · SKETCH/PAINT

Sketch to Paint

An image placeholder that paints the real picture in: a pencil sketch of its own edges (a Sobel edge filter broken by the paper's tooth, hatched in the shadows) is drawn in by one diagonal pass, then watercolour washes — the picture wobbled, softened, posterised and lifted toward the paper — bloom into it region by region in a painter's order, each bloom spreading fast and slowing as it dries to a tide line, and finally the picture resolves through the paint on the enter ease. The pointer is a wet brush: moving a mouse over the paper, or dragging a finger or pen, soaks the wash through under it at once and opens each region's bloom from the brush's own point, pulling the whole schedule forward. Enter or Space runs the brush along the next unpainted row.

KQ-1203 · SKETCH/PAINT

Fieldline Journal · 14 March · the greenhouse

painting · paint ahead with the brush

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

Props

alt: string; default —; What the picture shows. Exposed the whole time, while it is painted and after.
src: string; default —; The image to paint. Without it, children is the picture.
children: React.ReactNode; default —; The finished picture when there is no src: any element that fills its box, such as an inline SVG illustration.
ready: boolean; default —; Controlled readiness. Uncontrolled, an image is ready once it has loaded (or failed), and children at once — the painting itself is then the minimum run.
progress: number; default —; How much of the picture has arrived, 0 to 1. Until ready, the painting holds at that stage; the brush can still paint ahead of it.
onReady: () => void; default —; Fires once per painting, when the picture has resolved through the paint.
speed: number; default 1; How fast the sketch, the blooms and the drying run, 0.5 to 2.
wash: number; default 0.5; How wet the paper is, 0 to 1: tight, precise washes with crisp edges, or loose washes whose soft, wandering blooms overrun their regions and the pencil.
pencil: "hb" | "4b"; default "hb"; The lead: a fine light HB line with sparse hatching, or a soft dark 4B with heavy hatching in the shadows.
sound: boolean; default false; Play the bristles on the paper, pitched and as loud as the brush is fast, while the visitor paints, and during the keyboard's stroke. The painting itself is silent.
disabled: boolean; default false; It still paints itself; the brush does nothing.
className: string; default —; Sizes the box; it is aspect-[4/3] w-full by default.

Prop	Type	Default	Description
alt	string	—	What the picture shows. Exposed the whole time, while it is painted and after.
src	string	—	The image to paint. Without it, children is the picture.
children	React.ReactNode	—	The finished picture when there is no src: any element that fills its box, such as an inline SVG illustration.
ready	boolean	—	Controlled readiness. Uncontrolled, an image is ready once it has loaded (or failed), and children at once — the painting itself is then the minimum run.
progress	number	—	How much of the picture has arrived, 0 to 1. Until ready, the painting holds at that stage; the brush can still paint ahead of it.
onReady	() => void	—	Fires once per painting, when the picture has resolved through the paint.
speed	number	1	How fast the sketch, the blooms and the drying run, 0.5 to 2.
wash	number	0.5	How wet the paper is, 0 to 1: tight, precise washes with crisp edges, or loose washes whose soft, wandering blooms overrun their regions and the pencil.
pencil	"hb" \| "4b"	"hb"	The lead: a fine light HB line with sparse hatching, or a soft dark 4B with heavy hatching in the shadows.
sound	boolean	false	Play the bristles on the paper, pitched and as loud as the brush is fast, while the visitor paints, and during the keyboard's stroke. The painting itself is silent.
disabled	boolean	false	It still paints itself; the brush does nothing.
className	string	—	Sizes the box; it is aspect-[4/3] w-full by default.