KQ-1246 · BOKEH/NIGHT

Bokeh Night

A backdrop of a seeded night street seen through a fast lens, every lamp, headlight, sign and far window drawn as the disc a real lens makes of it, sized by the circle-of-confusion law so near lights balloon when the focus is far and the far city blooms when it is near; discs at the frame's edge are cut into cat's-eyes and street-level lights shine back from the wet road. The pointer's height sets the focus plane and the lens racks to it on the glide spring while the traffic drifts and the camera sways, only on screen. The focus is a real vertical slider under the content: arrow keys rack it nearer or farther, Page Up and Page Down by a quarter, Home to the nearest lights and End to infinity.

KQ-1246 · BOKEH/NIGHT

Waylight

Home after midnight

Trains every 12 minutes until 2:00

focus 8 m · mid-street sharp · round aperture

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

Props

children: React.ReactNode; default —; What sits over the street: a hero, a heading, a call to action. Its text takes a lamp-white that reads on the night.
value / defaultValue: number; default 0.75; The focus plane: 0 focuses on the nearest lights (2 m), 1 at infinity.
onValueChange: (value: number) => void; default —; Fires from the pointer, tap or key that moved the focus, with the new value.
aperture: "round" | "hex"; default "round"; The lens's aperture: round discs, or six-bladed hexagons.
density: number; default 0.5; How busy the street is, 0 to 1: a quiet side street to a busy avenue.
warmth: number; default 0.5; The share of sodium lamps, tungsten headlights and warm signs, 0 to 1, against LED white and teal.
seed: number; default 1; Lays out the street: the same seed always makes the same street.
interactive: boolean; default true; Let the pointer and the keyboard move the focus. Off, the street is decoration only: no tab stop, no pointer handling.
label: string; default "Focus"; The focus control's accessible name.
className: string; default "h-full w-full"; Sets the size.

Prop	Type	Default	Description
children	React.ReactNode	—	What sits over the street: a hero, a heading, a call to action. Its text takes a lamp-white that reads on the night.
value / defaultValue	number	0.75	The focus plane: 0 focuses on the nearest lights (2 m), 1 at infinity.
onValueChange	(value: number) => void	—	Fires from the pointer, tap or key that moved the focus, with the new value.
aperture	"round" \| "hex"	"round"	The lens's aperture: round discs, or six-bladed hexagons.
density	number	0.5	How busy the street is, 0 to 1: a quiet side street to a busy avenue.
warmth	number	0.5	The share of sodium lamps, tungsten headlights and warm signs, 0 to 1, against LED white and teal.
seed	number	1	Lays out the street: the same seed always makes the same street.
interactive	boolean	true	Let the pointer and the keyboard move the focus. Off, the street is decoration only: no tab stop, no pointer handling.
label	string	"Focus"	The focus control's accessible name.
className	string	"h-full w-full"	Sets the size.