KQ-1394 · DOT/LENS

Dot Lens

A quiet field of fine dots that swells into a fisheye lens: within it each dot is carried along its radius by the map g(u) = (m+1)u/(mu+1), so dots near the centre swell and spread while the rim packs into a fine ring of compressed grain. The lens trails the pointer on a spring set by lag (the flick, glide or drift constants) and swells in on the snap spring; a click sends a ring out through the grid and the lens throbs on the recoil spring. Focus brings the lens in: Arrow keys move it, Home re-centres it, Enter or Space sends a ring, Escape lets it rest.

KQ-1394 · DOT/LENS

Gaugeworks · field lens 3

×3.1

parked · move over the field or tab in

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/dot-lens

Props

radius: number; default 96; The lens radius, px; never more than 0.6 of the box's short side.
power: number; default 0.6; Magnification, 0 to 1.
dot: number; default 2; A resting dot's diameter, px.
gap: number; default 14; Spacing between dots, px.
lattice: "square" | "hex"; default "square"; How the dots are laid: a square grid or a hexagonal one.
color: string; default "var(--ink-3)"; The dots' colour.
accent: string; default "var(--accent-bright)"; The colour at the lens centre and on a pulse.
glow: number; default 0.6; How far dots under the lens lean toward accent, 0 to 1.
lag: number; default 0.5; How far the lens trails the pointer, 0 (the flick spring) to 1 (the drift spring).
pulse: number; default 0.6; Strength of the ring a click sends through the grid, 0 to 1.
rest: "center" | "hidden" | "drift"; default "center"; Where the lens goes when nobody leads it: parked in the middle, deflated away, or wandering.
interactive: boolean; default true; The pointer and the keyboard lead the lens and send rings; false leaves it at rest.
dpr: number; default 2; The highest device pixel ratio drawn, capped at 2.
label: string; default "Dot lens"; The accessible name of the keyboard surface.
onPulse: () => void; default —; Fires when a ring is sent: a click, a tap, Enter or Space.
onLeadChange: (leading: boolean) => void; default —; Fires when the pointer or the keys start (true) or stop (false) leading the lens.
children: React.ReactNode; default —; Content over the field, in its own layer.
className: string; default "aspect-[2/1] w-full"; Size the box here.

Prop	Type	Default	Description
radius	number	96	The lens radius, px; never more than 0.6 of the box's short side.
power	number	0.6	Magnification, 0 to 1.
dot	number	2	A resting dot's diameter, px.
gap	number	14	Spacing between dots, px.
lattice	"square" \| "hex"	"square"	How the dots are laid: a square grid or a hexagonal one.
color	string	"var(--ink-3)"	The dots' colour.
accent	string	"var(--accent-bright)"	The colour at the lens centre and on a pulse.
glow	number	0.6	How far dots under the lens lean toward accent, 0 to 1.
lag	number	0.5	How far the lens trails the pointer, 0 (the flick spring) to 1 (the drift spring).
pulse	number	0.6	Strength of the ring a click sends through the grid, 0 to 1.
rest	"center" \| "hidden" \| "drift"	"center"	Where the lens goes when nobody leads it: parked in the middle, deflated away, or wandering.
interactive	boolean	true	The pointer and the keyboard lead the lens and send rings; false leaves it at rest.
dpr	number	2	The highest device pixel ratio drawn, capped at 2.
label	string	"Dot lens"	The accessible name of the keyboard surface.
onPulse	() => void	—	Fires when a ring is sent: a click, a tap, Enter or Space.
onLeadChange	(leading: boolean) => void	—	Fires when the pointer or the keys start (true) or stop (false) leading the lens.
children	React.ReactNode	—	Content over the field, in its own layer.
className	string	"aspect-[2/1] w-full"	Size the box here.