KQ-1210 · ETCH/REVEAL

Etch Reveal

An image placeholder that is a drawing toy: while the picture loads, one continuous line traced from its own contours runs across a powder screen at a steady mechanical pace, the left knob turning with the stylus's x and the right with its y, and when the line is done and the picture is ready the powder fades into the picture on the enter ease. Turning either knob — dragged round its centre, or by arrow keys, since both are real sliders — draws by hand while the tracing waits, and a turned knob settles on springs.snap. Dragging the frame side to side shakes the toy, rubber-banded within its own padding and settling on springs.snap with the release velocity, and every stroke knocks powder back over the line until the screen is clear; the Shake plate does the same from the keyboard.

KQ-1210 · ETCH/REVEAL

Basin damSurvey 0614 · 41 m crest

drawing · turn a knob · shake to clear

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/etch-reveal

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 line has been drawn.
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 stylus draws by itself, 0.5 to 2.
frame: "red" | "teal" | "ink"; default "red"; The toy's colour, a fixed pigment in either theme.
line: number; default 2; The stylus's line, 1 to 3 px.
ratio: number; default 2; The screen's width over its height.
sound: boolean; default false; Play the stylus scraping while the visitor turns a knob, and the powder rushing while they shake. Every loop stops on release, key up or blur; the automatic drawing is silent.
disabled: boolean; default false; The toy still draws and resolves; knobs and shaking are off.
className: string; default —; Sizes the toy; the default is 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 line has been drawn.
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 stylus draws by itself, 0.5 to 2.
frame	"red" \| "teal" \| "ink"	"red"	The toy's colour, a fixed pigment in either theme.
line	number	2	The stylus's line, 1 to 3 px.
ratio	number	2	The screen's width over its height.
sound	boolean	false	Play the stylus scraping while the visitor turns a knob, and the powder rushing while they shake. Every loop stops on release, key up or blur; the automatic drawing is silent.
disabled	boolean	false	The toy still draws and resolves; knobs and shaking are off.
className	string	—	Sizes the toy; the default is w-full.