KQ-1593 · BURNING/GLASS

Burning Glass

A frame of images you burn through with a magnifying glass: inside the frame the cursor is the glass, the picture under the lens a little darker and its light gathered into one bright point. Hold still and the spot browns, smokes and catches, then a hole spreads outward on its own along a ragged, glowing ember edge with a ring of char ahead of it until the next image is on top; move away early and only a scorch is left, fading slowly. Heat lives in a small WebGL2 field the CPU mirrors, so nothing is read back; the frame is a button, arrows move the glass and Enter burns from where it is.

KQ-1593 · BURNING/GLASS

Waylight · Dunes at noon

dunes at noon · hold the glass still

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/burning-glass

Props

images: readonly BurningGlassImage[]; default defaultBurningGlassImages; The images, { src, alt }, in the order they burn through; for WebGL they must be same-origin or CORS.
value / defaultValue: number; default 0; The index of the image on top.
onValueChange: (index: number) => void; default —; Fires when a burn has gone all the way through, with the index now on top.
focus: number; default 0.6; How tightly the glass focuses the sun: a broad warm glow (0) to a hard pin-point that bites fast (1).
burnRate: number; default 1; How quickly a held spot catches and how fast the hole spreads, 0.25 to 2.
scorch: number; default 0.5; How dark the browning goes and how long a scorch lingers once you move away.
lensSize: number; default 92; The glass's diameter in px; it shrinks to fit short frames.
smoke: number; default 0.6; How much smoke rises from hot spots and burning edges.
emberColor: string; default a warm pigment from --warn; The glow along the burning edge, any CSS colour.
smokeColor: string; default a grey from --ink-3; The smoke, any CSS colour.
label: string; default "Burn through to the next image"; The frame's accessible name.
onStageChange: (stage: BurningGlassStage) => void; default —; Fires as the held spot warms, browns, smokes and catches, and when it settles again.
sound: boolean; default false; Sizzle while the spot heats and burns, with a flare when it catches.
paused: boolean; default false; Hold everything where it is.
disabled: boolean; default false; Shows the image but takes no input.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
className: string; default "h-56 w-full"; Sizes the frame; give it a height.

Prop	Type	Default	Description
images	readonly BurningGlassImage[]	defaultBurningGlassImages	The images, { src, alt }, in the order they burn through; for WebGL they must be same-origin or CORS.
value / defaultValue	number	0	The index of the image on top.
onValueChange	(index: number) => void	—	Fires when a burn has gone all the way through, with the index now on top.
focus	number	0.6	How tightly the glass focuses the sun: a broad warm glow (0) to a hard pin-point that bites fast (1).
burnRate	number	1	How quickly a held spot catches and how fast the hole spreads, 0.25 to 2.
scorch	number	0.5	How dark the browning goes and how long a scorch lingers once you move away.
lensSize	number	92	The glass's diameter in px; it shrinks to fit short frames.
smoke	number	0.6	How much smoke rises from hot spots and burning edges.
emberColor	string	a warm pigment from --warn	The glow along the burning edge, any CSS colour.
smokeColor	string	a grey from --ink-3	The smoke, any CSS colour.
label	string	"Burn through to the next image"	The frame's accessible name.
onStageChange	(stage: BurningGlassStage) => void	—	Fires as the held spot warms, browns, smokes and catches, and when it settles again.
sound	boolean	false	Sizzle while the spot heats and burns, with a flare when it catches.
paused	boolean	false	Hold everything where it is.
disabled	boolean	false	Shows the image but takes no input.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
className	string	"h-56 w-full"	Sizes the frame; give it a height.