KQ-1202 · INSTANT/SHAKE

Instant Shake

An image placeholder presented as an instant photo: it feeds out of the camera's slot at a motor's steady pace and comes up in the hand, the real picture rising through a blue-grey or brown-amber murk that thins in mottled patches while brightness, contrast and colour return. Grabbing it swings it from the slot 1:1 like a pendulum, and every reversal is a stroke that agitates the chemistry so a hard shake brings it up in about half the time; let go, it swings home on springs.recoil with the throw, and when it is done the caption is written into the chin and the rollers let it drop onto springs.recoil. Arrow keys swing it, Enter or Space shakes it three times, ArrowDown pulls a feeding photo out.

KQ-1202 · INSTANT/SHAKE

Waylight Booth · strip 2 of 4

Lake Aster, 7 am

developing · shake it to bring it up

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/instant-shake

Props

alt: string; default —; What the picture shows. Exposed the whole time, while it develops and after.
src: string; default —; The image to develop. 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.
caption: string; default —; Written into the frame's chin, left to right, when the photo is done.
ready: boolean; default —; Controlled readiness. Uncontrolled, an image is ready once it has loaded (or failed), and children at once — the photo's own chemistry is then the minimum run.
progress: number; default —; How much of the picture has arrived, 0 to 1. Until ready, the chemistry holds exactly at that stage however hard it is shaken.
onReady: () => void; default —; Fires once per photo, when it has come up and let go of the camera.
speed: number; default 1; How fast the photo feeds out and the chemistry runs, 0.5 to 2.
tint: "cool" | "warm"; default "cool"; The film's murk and colour cast while it develops: blue-grey clearing through cyan, or brown-amber clearing through amber.
frame: "classic" | "wide"; default "classic"; The format: a square window with a deep chin, or a landscape window. The whole photo reshapes.
sound: boolean; default false; Play a swish for each shake stroke and the motor's whir while a feeding photo is pulled out. The automatic feed and the chemistry are silent.
disabled: boolean; default false; The photo still feeds out and develops; it cannot be shaken or pulled.
className: string; default —; Sizes the instrument's width; it is w-full max-w-72 by default and its height follows the format.

Prop	Type	Default	Description
alt	string	—	What the picture shows. Exposed the whole time, while it develops and after.
src	string	—	The image to develop. 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.
caption	string	—	Written into the frame's chin, left to right, when the photo is done.
ready	boolean	—	Controlled readiness. Uncontrolled, an image is ready once it has loaded (or failed), and children at once — the photo's own chemistry is then the minimum run.
progress	number	—	How much of the picture has arrived, 0 to 1. Until ready, the chemistry holds exactly at that stage however hard it is shaken.
onReady	() => void	—	Fires once per photo, when it has come up and let go of the camera.
speed	number	1	How fast the photo feeds out and the chemistry runs, 0.5 to 2.
tint	"cool" \| "warm"	"cool"	The film's murk and colour cast while it develops: blue-grey clearing through cyan, or brown-amber clearing through amber.
frame	"classic" \| "wide"	"classic"	The format: a square window with a deep chin, or a landscape window. The whole photo reshapes.
sound	boolean	false	Play a swish for each shake stroke and the motor's whir while a feeding photo is pulled out. The automatic feed and the chemistry are silent.
disabled	boolean	false	The photo still feeds out and develops; it cannot be shaken or pulled.
className	string	—	Sizes the instrument's width; it is w-full max-w-72 by default and its height follows the format.