KQ-1387 · LANTERN/CURSOR

Lantern Cursor

A dim room lit by a lantern the visitor carries: a canvas of night over any children with a feathered pool cut out of it and a faint warm spill past its edge, plus a disc of lamplight blended over what it lights. The lantern follows the pointer on a damped spring that slides from springs.flick through springs.glide to springs.drift by lag, leaning ahead along its travel and stretching with speed, while seeded noise makes the flame breathe; leaving sets it down at rest on springs.drift. Keyboard focus inside carries the light to the focused element and opens it to cover it.

KQ-1387 · LANTERN/CURSOR

Coldbrook Lodge · night walks

Bring a lantern. Leave the map.

Three stops, 3.4 km, back by ten.

lantern at rest · move over the card, or tab to it

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/lantern-cursor

Props

children: ReactNode; default —; The scene the lantern lights; it stays fully interactive.
radius: number; default 130; The pool of light's radius, in CSS pixels.
warmth: number; default 0.6; The light's colour temperature, from a neutral white at 0 to candle amber at 1.
dim: number; default 0.8; How dark the room is outside the light, 0 to 1.
feather: number; default 0.6; How soft the pool's edge is, as a share of its radius.
lag: number; default 0.5; How far the lantern lags the hand: the flick spring at 0, glide at 0.5, drift at 1.
lean: number; default 0.5; How far the light swings ahead along its travel and stretches with speed, 0 to 1.
flicker: number; default 0.4; The flame's faint flicker in size and warmth; 0 holds it steady and lets the loop stop.
glow: number; default 0.5; The warmth the lamplight lays over what it lights, 0 to 1.
rest: [number, number]; default [0.5, 0.45]; Where the lantern is set down when the pointer leaves, as fractions of the box.
darkness: string; default "oklch(0.16 0.025 262)"; The night's colour; fixed art by default, because night is night in either theme.
followFocus: boolean; default true; Keyboard focus inside carries the lantern to the focused element.
interactive: boolean; default true; The pointer carries the lantern (mouse and pen; touch gets the resting light).
paused: boolean; default false; Hold the flicker.
seed: number; default 5; Seed for the flicker.
dpr: number; default 2; The highest device pixel ratio the canvas draws at (never above 2).
className: string; default —; Classes for the box.

Prop	Type	Default	Description
children	ReactNode	—	The scene the lantern lights; it stays fully interactive.
radius	number	130	The pool of light's radius, in CSS pixels.
warmth	number	0.6	The light's colour temperature, from a neutral white at 0 to candle amber at 1.
dim	number	0.8	How dark the room is outside the light, 0 to 1.
feather	number	0.6	How soft the pool's edge is, as a share of its radius.
lag	number	0.5	How far the lantern lags the hand: the flick spring at 0, glide at 0.5, drift at 1.
lean	number	0.5	How far the light swings ahead along its travel and stretches with speed, 0 to 1.
flicker	number	0.4	The flame's faint flicker in size and warmth; 0 holds it steady and lets the loop stop.
glow	number	0.5	The warmth the lamplight lays over what it lights, 0 to 1.
rest	[number, number]	[0.5, 0.45]	Where the lantern is set down when the pointer leaves, as fractions of the box.
darkness	string	"oklch(0.16 0.025 262)"	The night's colour; fixed art by default, because night is night in either theme.
followFocus	boolean	true	Keyboard focus inside carries the lantern to the focused element.
interactive	boolean	true	The pointer carries the lantern (mouse and pen; touch gets the resting light).
paused	boolean	false	Hold the flicker.
seed	number	5	Seed for the flicker.
dpr	number	2	The highest device pixel ratio the canvas draws at (never above 2).
className	string	—	Classes for the box.