KQ-1569 · BOKEH/ORBIT

Bokeh Orbit

Pictures ride a slow elliptical orbit seen from a little above, through a thin-lens model: each picture's circle of confusion is the aperture times its distance from the focal plane, so the picture at the plane is crisp and the rest melt, their lights blooming into soft-rimmed bokeh discs that grow with the blur. The pointer's height racks the focal plane on springs.glide, read off a distance scale, and a click spins the orbit open on springs.snap with the phase kicked on springs.drift before it draws back in on springs.drift. The scale is a vertical slider: arrows rack the focus, Page keys in larger steps, Home is infinity and End the nearest, Enter or Space spins the orbit open.

KQ-1569 · BOKEH/ORBIT

Coldbrook Gallery · night opening

Nine prints, in focus where you point

focus 2.9 m · click to spin the orbit open

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/bokeh-orbit

Props

items: { src?: string; alt: string; caption?: string }[]; default nine drawn pictures; The pictures on the orbit, up to 16.
aperture: number; default 0.6; How wide the lens is open, 0 to 1: wide open, only the focal plane is sharp.
radius: number; default 0.85; The orbit's size in the box, 0.4 to 1.
spin: number; default 6; The idle turn in degrees per second; negative turns the other way.
focus / defaultFocus: number; default 0.5; The focal plane, 0 (far) to 1 (near), controlled or initial.
onFocusChange: (focus: number) => void; default —; Fires as the pointer, the scale or a key racks the focus.
followPointer: boolean; default true; Rack the focus to the pointer's height over the stage.
tilt: number; default 22; How far the orbit tips toward you, degrees.
highlights: number; default 0.7; Strength of the bokeh discs out-of-focus highlights bloom into, 0 to 1.
bloom: number; default 1.4; How far a click opens the orbit, 1 to 2 times its radius.
pictureSize: number; default fitted; A picture's width at the front of the orbit, px.
scale: boolean; default true; Show the focus distance scale at the left edge.
paused: boolean; default false; Hold the idle turn.
label: string; default "Orbit of pictures"; The orbit's accessible name.
disabled: boolean; default false; No racking or spinning by hand.
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 }[]	nine drawn pictures	The pictures on the orbit, up to 16.
aperture	number	0.6	How wide the lens is open, 0 to 1: wide open, only the focal plane is sharp.
radius	number	0.85	The orbit's size in the box, 0.4 to 1.
spin	number	6	The idle turn in degrees per second; negative turns the other way.
focus / defaultFocus	number	0.5	The focal plane, 0 (far) to 1 (near), controlled or initial.
onFocusChange	(focus: number) => void	—	Fires as the pointer, the scale or a key racks the focus.
followPointer	boolean	true	Rack the focus to the pointer's height over the stage.
tilt	number	22	How far the orbit tips toward you, degrees.
highlights	number	0.7	Strength of the bokeh discs out-of-focus highlights bloom into, 0 to 1.
bloom	number	1.4	How far a click opens the orbit, 1 to 2 times its radius.
pictureSize	number	fitted	A picture's width at the front of the orbit, px.
scale	boolean	true	Show the focus distance scale at the left edge.
paused	boolean	false	Hold the idle turn.
label	string	"Orbit of pictures"	The orbit's accessible name.
disabled	boolean	false	No racking or spinning by hand.
className	string	—	Sizes the piece; it fills its parent by default (h-full w-full).