Svelte 5 component · machines-ui · Animated

GraphMandala

A lotus mandala drawn in terminal glyphs, blooming outward ring by ring and then slowly rotating.

Install

GraphMandala is a Svelte 5 animated ASCII mandala component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/machines-ui

import

import '@fractaldesign/machines-ui/style.css';
import { GraphMandala } from '@fractaldesign/machines-ui';

Example

<GraphMandala title="YANTRA" folds={8} rings={5} />

Name	Type	Default
`title`	`string` Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.	`—`
`animated`	`boolean` Animate the bloom. Default true. Reduced motion freezes a fully bloomed frame.	`true`
`cols`	`number` Width of the scene in characters; at least 38 so the outermost ring fits. Default 48.	`48`
`rows`	`number` Height of the scene in rows; at least 20 so the circle fits the cell aspect. Default 24.	`24`
`folds`	`number` Rotational folds (K). One cell of the canonical petal is rotated K times. Default 8.	`8`
`rings`	`number` Number of concentric lotus-petal rings. Default 5.	`5`
`speedMs`	`number` Milliseconds per tick. Default 130.	`130`
`seedNum`	`number` Seed for the per-ring radius and phase perturbation. Default 11.	`11`
`label`	`string` Short caption under the art; the art itself is decorative.	`'the circle that holds'`
`class`	`string`	`''`