Svelte 5 component · machines-ui · Animated
GraphMandel
ASCII Mandelbrot with a slow cinematic zoom into seahorse valley.
Install
GraphMandel is a Svelte 5 animated ASCII mandel 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 { GraphMandel } from '@fractaldesign/machines-ui';Usage
<GraphMandel title="SEAHORSE" />Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. | — |
cols | number Columns of the grid. Default 66. | 66 |
rows | number Rows of the grid. Default 20. | 20 |
charset | string Escape count -> glyph, low to high. Keep it ASCII for grid alignment. | ' .:-=+*#%@' |
speedMs | number Milliseconds per zoom tick. Default 140. | 140 |
zoomPerTick | number Window shrink factor per tick. Default 1.06. | 1.06 |
maxIter | number Starting iteration budget; grows +2 per tick, capped at 300. Default 90. | 90 |
animated | boolean Start playing on mount. Default true. Reduced motion starts paused. | true |
showControls | boolean Show the playback controls. Default true. | true |
corner | string Character at each corner of the frame. Default "+". | — |
class | string | '' |
Related components
GraphPulse A live health strip: a window of blips — ok, degraded, or down — appended at a fixed interval, newest on the…GraphRain A looping character-art rain animation with adjustable trails and dimensions.GraphScatter An ASCII scatter plot: x/y points mapped onto a grid, with optional accent points and a linear-trend strip.GraphScope An oscilloscope window that scrolls a data series leftwards, drawing each column as a line or as an area…GraphSequence An animated sequence diagram: four participants (Browser, Server, DB, Worker) on lifelines, with request…GraphSpinners A framed text spinner with built-in or custom frames and an optional loading label.