Agni
An ASCII fire that burns upward from a pit, with rising sparks and live sliders for the grid size, speed, and cooling.
Install
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { GraphAgni } from '@fractaldesign/machines-ui';Preview
<GraphAgni title="HAVAN" cols={48} rows={12} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. |
| animated | boolean | true | Animate the burn. Default true. Reduced motion freezes a mid-burn frame. |
| showControls | boolean | true | Show the playback controls. Default true. |
| cols | number | 56 | Width of the scene in characters. Default 56. |
| rows | number | 16 | Height of the scene in rows. Default 16. |
| speedMs | number | 90 | Milliseconds per simulation step. Default 90. |
| cooling | number | 0.6 | Random decay strength; higher burns out sooner. Default 0.6. |
| seedNum | number | 3 | Seed for the reproducible burn. Default 3. |
| class | string | '' |
API
- class forwarded to the outer element
- motion runs live; set animated={false} to freeze
- a11y honours prefers-reduced-motion
Types
| Name | Kind | Description |
|---|---|---|
| Seg | interface | |
| Spark | interface |
Theming
CSS custom properties this component reads.
- --border
- --fill
- --graph-accent
- --knob-thumb
- --knob-track
- --text-muted
- --text-primary
- --text-secondary
- --text-xs
Related
Built from
src/lib/components/animated/GraphAgni.svelte