ASCII fire licking up from a white-hot bed of glyphs
| Name | Type | Default | Description |
|---|---|---|---|
colors | [string, string] | ["#7B3DFF", "#FF7AD9"] | Colour of the flame body and colour of its hot core, blended in OKLab. The tips fade to a deep shade of the first and the bed burns white-hot. |
backgroundColor | string | "#0A0A0A" | Colour behind the fire. |
mode | "auto" | "glow" | "ink" | "auto" | glow adds light for dark backgrounds, ink prints coloured glyphs for light ones. auto picks from the background brightness. |
charset | string | dense ASCII ramp | Characters the fire is drawn with. They are sorted by how much ink each one uses, so any string works as a density ramp: letters, blocks, digits or your own. |
fontFamily | string | system monospace | Font used to draw the glyphs. Use a font that is already loaded on the page. |
glyphSize | number | 11 | Height of the glyphs in pixels. Smaller glyphs give a finer, denser fire. |
spacing | number | 1 | Horizontal gap between glyph columns, from 0.6 (packed) to 3 (sparse). |
height | number | 0.45 | How high the flames reach, as a fraction of the height. |
fuel | number | 1 | Heat of the bed feeding the fire, from 0 to 2. |
turbulence | number | 0.6 | How much the rising heat swirls and licks, from 0 (straight) to 2. |
wind | number | 0.15 | Sideways draft from -1 (left) to 1 (right), with slow natural gusts. |
flicker | number | 0.5 | How fast individual glyphs shimmer between neighbouring characters, from 0 to 1. |
sparks | number | 0.5 | How many sparks drift up from the bed, from 0 to 1. |
smoke | number | 0.35 | How much faint smoke the flame tips leave behind as they cool, from 0 to 1. |
pulse | number | 0 | Slow breathing of the fire's heat, from 0 (steady) to 1. |
speed | number | 1 | Overall animation speed. |
glow | number | 0.35 | Soft bloom around the hottest glyphs, from 0 to 3. |
intensity | number | 1 | Overall exposure. |
interactive | boolean | true | Respond to the pointer. |
snuff | boolean | true | The pointer snuffs the flames it touches. They die down around it and turn into grey smoke that curls upward, then the fire recovers when the pointer moves on. |
snuffRadius | number | 70 | Radius of the snuffed zone around the pointer, in pixels. |
snuffStrength | number | 0.8 | How strongly the pointer smothers the flames, from 0 to 1. |
clickStoke | boolean | true | Clicking stokes the fire like a bellows: the flames there leap up and a burst of sparks flies upward. |
stokeStrength | number | 1 | Strength of a stoke, from 0 to 3. |
paused | boolean | false | Freeze the fire. Reduced-motion users always get a still frame. |
quality | number | 1 | Resolution scale from 0.25 to 1. Lower values are cheaper on large screens. |
ref | { stoke } | — | stoke(x) stokes the fire at a horizontal position between 0 and 1, for example when a form is submitted. |
children | ReactNode | — | Content placed over the background. |
className | string | — | Classes for the root element. It fills its parent, with a 240px minimum height. |
style | CSSProperties | — | Inline styles for the root element. |
colors[string, string]Colour of the flame body and colour of its hot core, blended in OKLab. The tips fade to a deep shade of the first and the bed burns white-hot.
["#7B3DFF", "#FF7AD9"]backgroundColorstringColour behind the fire.
"#0A0A0A"mode"auto" | "glow" | "ink"glow adds light for dark backgrounds, ink prints coloured glyphs for light ones. auto picks from the background brightness.
"auto"charsetstringCharacters the fire is drawn with. They are sorted by how much ink each one uses, so any string works as a density ramp: letters, blocks, digits or your own.
dense ASCII rampfontFamilystringFont used to draw the glyphs. Use a font that is already loaded on the page.
system monospaceglyphSizenumberHeight of the glyphs in pixels. Smaller glyphs give a finer, denser fire.
11spacingnumberHorizontal gap between glyph columns, from 0.6 (packed) to 3 (sparse).
1heightnumberHow high the flames reach, as a fraction of the height.
0.45fuelnumberHeat of the bed feeding the fire, from 0 to 2.
1turbulencenumberHow much the rising heat swirls and licks, from 0 (straight) to 2.
0.6windnumberSideways draft from -1 (left) to 1 (right), with slow natural gusts.
0.15flickernumberHow fast individual glyphs shimmer between neighbouring characters, from 0 to 1.
0.5sparksnumberHow many sparks drift up from the bed, from 0 to 1.
0.5smokenumberHow much faint smoke the flame tips leave behind as they cool, from 0 to 1.
0.35pulsenumberSlow breathing of the fire's heat, from 0 (steady) to 1.
0speednumberOverall animation speed.
1glownumberSoft bloom around the hottest glyphs, from 0 to 3.
0.35intensitynumberOverall exposure.
1interactivebooleanRespond to the pointer.
truesnuffbooleanThe pointer snuffs the flames it touches. They die down around it and turn into grey smoke that curls upward, then the fire recovers when the pointer moves on.
truesnuffRadiusnumberRadius of the snuffed zone around the pointer, in pixels.
70snuffStrengthnumberHow strongly the pointer smothers the flames, from 0 to 1.
0.8clickStokebooleanClicking stokes the fire like a bellows: the flames there leap up and a burst of sparks flies upward.
truestokeStrengthnumberStrength of a stoke, from 0 to 3.
1pausedbooleanFreeze the fire. Reduced-motion users always get a still frame.
falsequalitynumberResolution scale from 0.25 to 1. Lower values are cheaper on large screens.
1ref{ stoke }stoke(x) stokes the fire at a horizontal position between 0 and 1, for example when a form is submitted.
—childrenReactNodeContent placed over the background.
—classNamestringClasses for the root element. It fills its parent, with a 240px minimum height.
—styleCSSPropertiesInline styles for the root element.
—