KQ-1568 · LENS/TURRET

Lens Turret

A cine camera's lens turret: a machined plate of lenses, each holding a picture in its glass, with the lens in the gate projected large behind it, every picture weighted by how squarely its lens sits in the gate so a spin flickers through them like a projector. A drag turns it 1:1 through a notched detent field and a flick coasts on friction while the lenses smear, then a detent spring whose stiffness and damping come from detentStrength clicks the next lens into the gate carrying the coast's velocity, and the projection racks into focus on a tween. It is a slider: arrow keys turn it one lens at a time on the same detent spring, Home and End go to the first and last lens, and a click on a lens turns it in.

KQ-1568 · LENS/TURRET

Gaugeworks Cine · test reel 04

Flick the turret, or use the arrow keys

lens 1 of 4 · 16 mm · Salt flats

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/lens-turret

Props

items: { src?: string; alt: string; caption?: string }[]; default six drawn pictures; The pictures, one per lens; they repeat when there are fewer than lenses.
lensCount: number; default 4; How many lenses the turret carries, 3 to 6.
blur: number; default 0.6; How much the lenses smear when the turret spins, 0 to 1.
detentStrength: number; default 0.6; How notchy the drag feels and how firmly a lens clicks into the gate, 0 to 1.
value / defaultValue: number; default 0; The lens in the gate, controlled or initial.
onValueChange: (index: number) => void; default —; Fires from the drag, flick, click or key that brought a new lens to the gate.
friction: number; default 0.5; How soon a flick runs down, 0 (coasts) to 1 (stops short).
finish: "black" | "chrome" | "brass"; default "black"; The turret's metal.
focalLengths: string[]; default ["16", "25", "50", "75", "100", "135"]; Focal lengths engraved on the barrels, in millimetres.
focusRack: boolean; default true; Rack the projection into focus after each landing.
caption: boolean; default true; Show the projected picture's caption.
turretSize: number; default fitted; The turret's diameter, px.
sound: boolean; default false; Detent clicks as lenses pass and land, after a visitor's action.
label: string; default "Lens turret"; The turret's accessible name.
disabled: boolean; default false; No turning.
className: string; default —; Sizes the piece; it fills its parent by default (h-full w-full).

Prop	Type	Default	Description
items	{ src?: string; alt: string; caption?: string }[]	six drawn pictures	The pictures, one per lens; they repeat when there are fewer than lenses.
lensCount	number	4	How many lenses the turret carries, 3 to 6.
blur	number	0.6	How much the lenses smear when the turret spins, 0 to 1.
detentStrength	number	0.6	How notchy the drag feels and how firmly a lens clicks into the gate, 0 to 1.
value / defaultValue	number	0	The lens in the gate, controlled or initial.
onValueChange	(index: number) => void	—	Fires from the drag, flick, click or key that brought a new lens to the gate.
friction	number	0.5	How soon a flick runs down, 0 (coasts) to 1 (stops short).
finish	"black" \| "chrome" \| "brass"	"black"	The turret's metal.
focalLengths	string[]	["16", "25", "50", "75", "100", "135"]	Focal lengths engraved on the barrels, in millimetres.
focusRack	boolean	true	Rack the projection into focus after each landing.
caption	boolean	true	Show the projected picture's caption.
turretSize	number	fitted	The turret's diameter, px.
sound	boolean	false	Detent clicks as lenses pass and land, after a visitor's action.
label	string	"Lens turret"	The turret's accessible name.
disabled	boolean	false	No turning.
className	string	—	Sizes the piece; it fills its parent by default (h-full w-full).