KQ-1538 · ASCII/HEARTH

ASCII Hearth

A small hearth drawn in characters — a brick surround in a running bond, a lintel and a hearthstone around a dark firebox — holding a fire whose every cell picks its glyph from a ramp by its heat and its ink from a ramp of ember red to white-hot, stepped at a fixed 30 Hz with rising noise carving the heat into licking tongues. The pointer's speed works the bellows: the air is a springs.recoil spring, so a fast pass makes the flames leap twice and settle while they lean away from the pointer on the springs.drift constants and throw sparks; left alone for bankAfter, the fire banks down to a bed of glowing embers. It is a real button: Space, Enter or a click gives one full puff.

KQ-1538 · ASCII/HEARTH

Fernworks Lodge · cabin 4

Wood stove, kindling by the door

sleeps 2 · from 120

fire steady · move across it to fan

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/ascii-hearth

Props

heat: number; default 0.6; How tall the fire burns while it is tended, 0 (embers) to 1.
charRamp: "classic" | "blocks" | "dots"; default "classic"; The glyph ramp the fire is drawn in, coolest to hottest.
draught: number; default 0.5; How strongly the pointer's speed fans the fire and leans the flames, 0 to 1.
bankAfter: number; default 5000; How long the fire burns untended before it banks down to embers, ms.
sparks: boolean; default true; Sparks fly from the bed while the fire is fanned.
bricks: boolean; default true; Draw the brick surround and hearthstone; off, the fire burns in a plain dark box.
size: number; default 9; Glyph size in px (7 to 16).
colors: readonly string[]; default —; Five CSS colours from ember to white-hot, mixed in oklab into twelve inks. Pigments at fixed lightness by default, so the fire reads the same in both themes.
brickColor: string; default "color-mix(in oklab, var(--danger) 28%, var(--ink-3))"; Brick ink, any CSS colour.
interactive: boolean; default true; The pointer and the keyboard work the bellows.
paused: boolean; default false; Hold the flames where they are.
seed: number; default 1; Seeds the logs, the tongues and the sparks.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onLevelChange: (level: "embers" | "low" | "steady" | "roaring") => void; default —; Fires with the fire's level from the start and whenever it changes: banked to embers, low, steady or roaring.
label: string; default "Fire"; The fire's name; the button reads "<label>: work the bellows".
disabled: boolean; default false; No bellows: the fire keeps burning and banks as usual, and the button is aria-disabled.
className: string; default "h-52 w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
heat	number	0.6	How tall the fire burns while it is tended, 0 (embers) to 1.
charRamp	"classic" \| "blocks" \| "dots"	"classic"	The glyph ramp the fire is drawn in, coolest to hottest.
draught	number	0.5	How strongly the pointer's speed fans the fire and leans the flames, 0 to 1.
bankAfter	number	5000	How long the fire burns untended before it banks down to embers, ms.
sparks	boolean	true	Sparks fly from the bed while the fire is fanned.
bricks	boolean	true	Draw the brick surround and hearthstone; off, the fire burns in a plain dark box.
size	number	9	Glyph size in px (7 to 16).
colors	readonly string[]	—	Five CSS colours from ember to white-hot, mixed in oklab into twelve inks. Pigments at fixed lightness by default, so the fire reads the same in both themes.
brickColor	string	"color-mix(in oklab, var(--danger) 28%, var(--ink-3))"	Brick ink, any CSS colour.
interactive	boolean	true	The pointer and the keyboard work the bellows.
paused	boolean	false	Hold the flames where they are.
seed	number	1	Seeds the logs, the tongues and the sparks.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onLevelChange	(level: "embers" \| "low" \| "steady" \| "roaring") => void	—	Fires with the fire's level from the start and whenever it changes: banked to embers, low, steady or roaring.
label	string	"Fire"	The fire's name; the button reads "<label>: work the bellows".
disabled	boolean	false	No bellows: the fire keeps burning and banks as usual, and the button is aria-disabled.
className	string	"h-52 w-full"	Sizes and shapes the box.