Svelte 5 component · machines-ui · Animated
GraphFlame
A flame graph drawn in ASCII, cycling which leaf of the call tree is lit as the hot path.
Install
GraphFlame is a Svelte 5 animated ASCII flame 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 { GraphFlame } from '@fractaldesign/machines-ui';Usage
<GraphFlame title="PROFILE" />Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
animated | boolean Animate the hot-path cycle. Default true. Reduced motion freezes on the first leaf. | true |
speedMs | number Milliseconds per leaf. Default 600. | 600 |
label | string Short caption under the art; the chart itself is the message. | 'flame graph, width = time' |
class | string | '' |
Related components
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.GraphMandala A lotus mandala drawn in terminal glyphs, blooming outward ring by ring and then slowly rotating.