KQ-1201 · DARKROOM/DEVELOP

Darkroom

An image placeholder that develops the real picture like a print in a darkroom tray: under a red safelight it comes up from blank paper through a print's tone curve — shadows, then midtones, then highlights — in twelve bands, each sped where the developer's slosh has just washed over it. Dragging tips the tray 1:1 and the liquid, an underdamped oscillator drawn as a travelling crest and the lamp's glint, sloshes after it, so a hard rock brings the print up in half the time; the tray levels on springs.glide with the throw, keyboard rocks go out on springs.snap and home on springs.glide, and when the picture is ready the liquid drains, the safelight switches off and the room light brings up its colour. Arrow keys tip the tray and Enter or Space rocks it both ways.

KQ-1201 · DARKROOM/DEVELOP

Fernworks Photo Lab · roll 6 · frame 14

developing · rock the tray to hurry it

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/darkroom-develop

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.
ready: boolean; default —; Controlled readiness. Uncontrolled, an image is ready once it has loaded (or failed), and children at once — the print's own development is then the minimum run.
progress: number; default —; How much of the picture has arrived, 0 to 1. Until ready, the print holds at that stage.
onReady: () => void; default —; Fires once per print, when the lights are on and the picture is whole.
speed: number; default 1; How fast the print comes up and the hand rocks the tray, 0.5 to 2.
safelight: boolean; default true; Develop under a red safelight that switches off when the print is done. Off, it develops grey on white in plain light.
grain: number; default 0.4; Silver grain that clumps as the image forms and clears with the room light, 0 (clean) to 1 (coarse).
sound: boolean; default false; Play a swish for each stroke of a rock, each keyboard rock and a flicked release. Development and the switch-off are silent.
disabled: boolean; default false; The print still develops; the tray cannot be rocked.
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 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.
ready	boolean	—	Controlled readiness. Uncontrolled, an image is ready once it has loaded (or failed), and children at once — the print's own development is then the minimum run.
progress	number	—	How much of the picture has arrived, 0 to 1. Until ready, the print holds at that stage.
onReady	() => void	—	Fires once per print, when the lights are on and the picture is whole.
speed	number	1	How fast the print comes up and the hand rocks the tray, 0.5 to 2.
safelight	boolean	true	Develop under a red safelight that switches off when the print is done. Off, it develops grey on white in plain light.
grain	number	0.4	Silver grain that clumps as the image forms and clears with the room light, 0 (clean) to 1 (coarse).
sound	boolean	false	Play a swish for each stroke of a rock, each keyboard rock and a flicked release. Development and the switch-off are silent.
disabled	boolean	false	The print still develops; the tray cannot be rocked.
className	string	—	Sizes the box; it is aspect-[4/3] w-full by default.