KQ-1206 · SLIDE/PROJECTOR

Slide Projector

A picture that arrives as a projected slide: it drops into the gate on the recoil spring while the lamp warms from amber to white, keystoned and out of focus, and while it loads the lens hunts either side of sharp on the drift spring with dust glinting in the beam. When the picture is ready the focus racks it sharp and the keystone squares up on the glide spring before the plain picture takes over. The focus ring in the deck is a slider dragged 1:1 or turned with the arrow keys, and an optional advance button clicks the next slide in.

KQ-1206 · SLIDE/PROJECTOR

Waylight Slides · Fieldline field trip

Focus

warming up · slide 1 of 3

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/slide-projector

Props

alt: string; default —; What the picture shows. On the picture from the first frame, loading or not.
src: string; default —; An image to load. Without it, children is the picture.
children: React.ReactNode; default —; The finished picture when there is no src: an illustration, a slide.
ready: boolean; default —; Controlled readiness; going from true to false clicks the next slide in. Uncontrolled, an image is ready once it has loaded (or failed), and children after a 2.4 s warm-up on screen.
progress: number; default —; How far the load has got, 0 to 1: the lens racks toward sharp as it climbs (no hunting), never reaching it before ready.
onReady: () => void; default —; Fires once per load, when the picture is sharp and square on the screen.
speed: number; default 1; The pace of the lamp, the focus hunt and the rack, 0.5 to 2.
keystone: number; default 0.5; How far off square the slide arrives, 0 to 1 (up to 22° of tilt).
dust: boolean; default true; Dust drifting and glinting in the beam while it loads.
ratio: number; default 16 / 9; The screen's width over its height.
onAdvance: () => void; default —; Shows the advance button. A press clacks, calls this, and clicks the next slide in.
advanceLabel: string; default "Next slide"; The advance button's accessible name.
focusLabel: string; default "Focus"; The focus ring's name, shown beside it.
sound: boolean; default false; A clack for the visitor's advance and a hum while their hand turns the ring. Automatic loads are silent.
disabled: boolean; default false; The load still plays; the ring and the advance cannot be used.
className: string; default —; Sizes the projector (screen and deck). Defaults to w-full.

Prop	Type	Default	Description
alt	string	—	What the picture shows. On the picture from the first frame, loading or not.
src	string	—	An image to load. Without it, children is the picture.
children	React.ReactNode	—	The finished picture when there is no src: an illustration, a slide.
ready	boolean	—	Controlled readiness; going from true to false clicks the next slide in. Uncontrolled, an image is ready once it has loaded (or failed), and children after a 2.4 s warm-up on screen.
progress	number	—	How far the load has got, 0 to 1: the lens racks toward sharp as it climbs (no hunting), never reaching it before ready.
onReady	() => void	—	Fires once per load, when the picture is sharp and square on the screen.
speed	number	1	The pace of the lamp, the focus hunt and the rack, 0.5 to 2.
keystone	number	0.5	How far off square the slide arrives, 0 to 1 (up to 22° of tilt).
dust	boolean	true	Dust drifting and glinting in the beam while it loads.
ratio	number	16 / 9	The screen's width over its height.
onAdvance	() => void	—	Shows the advance button. A press clacks, calls this, and clicks the next slide in.
advanceLabel	string	"Next slide"	The advance button's accessible name.
focusLabel	string	"Focus"	The focus ring's name, shown beside it.
sound	boolean	false	A clack for the visitor's advance and a hum while their hand turns the ring. Automatic loads are silent.
disabled	boolean	false	The load still plays; the ring and the advance cannot be used.
className	string	—	Sizes the projector (screen and deck). Defaults to w-full.