Svelte 5 component · machines-ui · Animated
GraphFire
A looping character-art fire animation with adjustable dimensions, cooling, and speed.
Install
GraphFire is a Svelte 5 animated ASCII fire component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphFire } from '@fractaldesign/machines-ui';Usage
<GraphFire title="FURNACE" cols={48} rows={10} />Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
animated | boolean Animate the burn. Default true. Reduced motion freezes a mid-burn frame. | true |
cols | number Width of the fire in characters. Default 60. | 60 |
rows | number Height of the fire in rows. Default 14. | 14 |
speedMs | number Milliseconds per simulation step. Default 90. | 90 |
cooling | number Random decay strength; higher burns out sooner. Default 0.6. | 0.6 |
seedNum | number Seed for the reproducible burn. Default 3. | 3 |
label | string Short caption under the art; the art itself is decorative. | 'simulated fire' |
class | string | '' |
Related components
GraphFlame A flame graph drawn in ASCII, cycling which leaf of the call tree is lit as the hot path.GraphFlowPlayer Plays through an ordered list of process steps, typing on the active step's label and revealing its detail…GraphGanga Three stepped river lines cascading down the frame while a lit diya rides the bottom flow; purely decorative.GraphHash A character-art hashing animation that transforms an input string into a changing digest.GraphJapa A mala (prayer-bead ring) drawn in ASCII, with a marker travelling bead by bead around the circle.GraphLife Conway's Game of Life in block glyphs, framed. Alive is accent, the dead leave a faint trail.