KQ-1620 · BURNER/CARD

Burner Card

A content card with a row of gas jets burning behind its top edge, drawn per pixel in WebGL2: a white-blue inner cone inside a taller translucent mantle for every port, a soft glow over the row and hot air above it that visibly wobbles the light. Hover, keyboard focus inside the card or a touch press turns the valve up on springs.snap, whose one overshoot is the roar before the taller, brighter flame settles, while the card's top edge catches the light; leaving turns it down on springs.drift to a low, steady flicker. The first time it is seen the burner lights from end to end, each jet popping alight as the front reaches it.

KQ-1620 · BURNER/CARD

Coldbrook · supper club

Open fire, Thursday nights

Six courses cooked over the hearth, one long table.

12 seats left

valve low · steady flicker

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/burner-card

Props

children: React.ReactNode; default —; The card's content.
flameHeight: number; default 26; The resting flame's height above the card's edge in px; the roar reaches flameHeight × roar and the headroom above the card is kept for it.
hue: number; default 255; The flame's hue in degrees at fixed lightness: 255 town-gas blue, 200 cyan, 290 violet, 150 copper green.
flutter: number; default 0.5; How restless the flame is, 0 (steady) to 1 (nervous and dancing).
roar: number; default 1.9; How much taller the flame stands with the valve open, as a multiple of flameHeight, 1 to 3.
active: boolean; default —; Holds the valve open (true) or low (false) whatever the pointer does; leave undefined for hover and focus to drive it.
onActiveChange: (active: boolean) => void; default —; Fires when hover, focus or a touch opens or closes the valve, with the new state.
interactive: boolean; default true; Hover, keyboard focus inside the card and a touch press open the valve.
jetSpacing: number; default 14; Distance between the burner's ports in px; smaller is a finer, denser row.
glow: number; default 0.6; The soft glow over the burner, 0 to 1.
shimmer: number; default 0.5; How much the hot air above the flame wobbles, 0 to 1.
ignite: "inView" | "mount" | "none"; default "inView"; When the burner lights: the first time it is seen, at mount, or already lit.
focusable: boolean; default false; Makes the card itself a tab stop, for cards with nothing focusable inside; name it with label.
label: string; default —; Names the card when it is focusable.
paused: boolean; default false; Holds the flicker still; the valve still opens and closes.
seed: number; default 1; Seeds each jet's own flicker.
dpr: number; default 2; Cap on the canvas's pixel ratio, at most 2; the soft flame never draws above 1.25.
className: string; default —; Classes for the root (width, margins).
cardClassName: string; default —; Classes for the card box (padding, background).

Prop	Type	Default	Description
children	React.ReactNode	—	The card's content.
flameHeight	number	26	The resting flame's height above the card's edge in px; the roar reaches flameHeight × roar and the headroom above the card is kept for it.
hue	number	255	The flame's hue in degrees at fixed lightness: 255 town-gas blue, 200 cyan, 290 violet, 150 copper green.
flutter	number	0.5	How restless the flame is, 0 (steady) to 1 (nervous and dancing).
roar	number	1.9	How much taller the flame stands with the valve open, as a multiple of flameHeight, 1 to 3.
active	boolean	—	Holds the valve open (true) or low (false) whatever the pointer does; leave undefined for hover and focus to drive it.
onActiveChange	(active: boolean) => void	—	Fires when hover, focus or a touch opens or closes the valve, with the new state.
interactive	boolean	true	Hover, keyboard focus inside the card and a touch press open the valve.
jetSpacing	number	14	Distance between the burner's ports in px; smaller is a finer, denser row.
glow	number	0.6	The soft glow over the burner, 0 to 1.
shimmer	number	0.5	How much the hot air above the flame wobbles, 0 to 1.
ignite	"inView" \| "mount" \| "none"	"inView"	When the burner lights: the first time it is seen, at mount, or already lit.
focusable	boolean	false	Makes the card itself a tab stop, for cards with nothing focusable inside; name it with label.
label	string	—	Names the card when it is focusable.
paused	boolean	false	Holds the flicker still; the valve still opens and closes.
seed	number	1	Seeds each jet's own flicker.
dpr	number	2	Cap on the canvas's pixel ratio, at most 2; the soft flame never draws above 1.25.
className	string	—	Classes for the root (width, margins).
cardClassName	string	—	Classes for the card box (padding, background).