KQ-1814 · EVENT/LENS

Event Lens

A black hole on a real headline: the browser lays out the words, each word is painted into a texture where it was set, and one WebGL2 pass lenses that picture through the point-lens equation, so the words behind the mass bend into arcs, a flipped image appears inside the Einstein radius and whatever is right behind becomes a ring round the shadow, swirled by spin, with a thin smoky accretion disc and a bright photon edge. Drag it and it follows 1:1 while its disc flares on springs.flick; release and it drifts back to rest on springs.drift carrying the throw. Arrow keys move it on springs.glide and Escape, Enter or Home let it drift home.

KQ-1814 · EVENT/LENS

Everything bends toward what matters.

Waylight · Attention

at rest · drag the mass

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

Props

headline: string; default "Everything bends toward what matters."; The headline the mass bends; real text, read by assistive technology.
subline: string; default —; A smaller line under the headline, bent too.
as: "h1" | "h2" | "h3" | "p"; default "h2"; The element the headline renders as.
image: { src?: string; alt?: string }; default —; A picture behind the words, drawn cover-fit; same-origin or CORS-enabled.
backdrop: "grid" | "dots" | "plain"; default "grid"; What lies behind the words: the house grid, a dot field or nothing.
mass: number; default 0.6; How heavy the mass is: the size of its shadow and how hard it bends, 0.2 to 1.
disk: number; default 0.6; How bright the accretion disc and the photon edge burn, 0 to 1.
spin: number; default 0.5; How fast it spins: the disc's turn, its lopsided glow and the swirl of the bent light, 0 to 1.
diskColor: string; default "oklch(from var(--warn) 0.8 0.15 calc(h - 22))"; The disc's colour, any CSS colour.
rest: { x: number; y: number }; default { x: 0.72, y: 0.5 }; Where the mass rests, as fractions of the box.
interactive: boolean; default true; Dragging and the keys move it.
paused: boolean; default false; Stops the disc turning.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Event lens"; The lens's accessible name.
onHoldChange: (held: boolean) => void; default —; Fires when the mass is taken hold of (true) and let go (false).
onRest: () => void; default —; Fires when the mass has drifted back to rest.
disabled: boolean; default false; Nothing moves it.
className: string; default "h-56 w-full"; Sizes the box.

Prop	Type	Default	Description
headline	string	"Everything bends toward what matters."	The headline the mass bends; real text, read by assistive technology.
subline	string	—	A smaller line under the headline, bent too.
as	"h1" \| "h2" \| "h3" \| "p"	"h2"	The element the headline renders as.
image	{ src?: string; alt?: string }	—	A picture behind the words, drawn cover-fit; same-origin or CORS-enabled.
backdrop	"grid" \| "dots" \| "plain"	"grid"	What lies behind the words: the house grid, a dot field or nothing.
mass	number	0.6	How heavy the mass is: the size of its shadow and how hard it bends, 0.2 to 1.
disk	number	0.6	How bright the accretion disc and the photon edge burn, 0 to 1.
spin	number	0.5	How fast it spins: the disc's turn, its lopsided glow and the swirl of the bent light, 0 to 1.
diskColor	string	"oklch(from var(--warn) 0.8 0.15 calc(h - 22))"	The disc's colour, any CSS colour.
rest	{ x: number; y: number }	{ x: 0.72, y: 0.5 }	Where the mass rests, as fractions of the box.
interactive	boolean	true	Dragging and the keys move it.
paused	boolean	false	Stops the disc turning.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Event lens"	The lens's accessible name.
onHoldChange	(held: boolean) => void	—	Fires when the mass is taken hold of (true) and let go (false).
onRest	() => void	—	Fires when the mass has drifted back to rest.
disabled	boolean	false	Nothing moves it.
className	string	"h-56 w-full"	Sizes the box.