KQ-1238 · VIEWFINDER

Viewfinder

A camera viewfinder over any scene with a two-stage shutter: holding it sinks the cap to its first stage on flick and racks the lens to the focus point's subject on the recoil spring, hunting through sharp twice before the brackets close on snap and turn green. Letting go fires — two curtains meet and part on a tween, and the frame, with the blur, exposure and roll it was taken with, shrinks out of the finder on snap and arcs into the corner slot on glide; released before the lock, the photo is soft. The nine focus points are a radiogroup the arrow keys move through, re-metering the scene and changing the shutter speed, and Space or Enter held on the shutter is the half-press, released the shot, with Escape to cancel.

KQ-1238 · VIEWFINDER

hold the shutter · focus on the lake

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/viewfinder

Props

children: React.ReactNode; default —; The scene: any content, framed 3:2 in a size container.
label: string; default "Camera"; The camera's accessible name.
point / defaultPoint: number; default 4; The focus point, 0 to 8, row by row from the top left.
onPointChange: (point: number) => void; default —; Fires from a tap on the scene or an arrow key with the point chosen.
onShoot: (shot: ViewfinderShot) => void; default —; Fires as the shutter falls, with the photo's count, point and whether focus had locked.
grid: "thirds" | "cross" | "none"; default "thirds"; The framing grid.
level: boolean; default true; Show the electronic level, which turns green when the frame is level.
focus: number; default 0.5; Depth of field, 0 (deep, f/11) to 1 (shallow, f/1.4): how soft the scene starts, how far the lens hunts, and the aperture and shutter speed read out.
sound: boolean; default false; The half-press detent, the focus beep and the shutter's two curtains. Nothing plays on its own.
disabled: boolean; default false; Takes no presses; a half-press held is cancelled.
className: string; default —; Classes for the 2:1 root; size it by width.

Prop	Type	Default	Description
children	React.ReactNode	—	The scene: any content, framed 3:2 in a size container.
label	string	"Camera"	The camera's accessible name.
point / defaultPoint	number	4	The focus point, 0 to 8, row by row from the top left.
onPointChange	(point: number) => void	—	Fires from a tap on the scene or an arrow key with the point chosen.
onShoot	(shot: ViewfinderShot) => void	—	Fires as the shutter falls, with the photo's count, point and whether focus had locked.
grid	"thirds" \| "cross" \| "none"	"thirds"	The framing grid.
level	boolean	true	Show the electronic level, which turns green when the frame is level.
focus	number	0.5	Depth of field, 0 (deep, f/11) to 1 (shallow, f/1.4): how soft the scene starts, how far the lens hunts, and the aperture and shutter speed read out.
sound	boolean	false	The half-press detent, the focus beep and the shutter's two curtains. Nothing plays on its own.
disabled	boolean	false	Takes no presses; a half-press held is cancelled.
className	string	—	Classes for the 2:1 root; size it by width.