Japa
A mala (prayer-bead ring) drawn in ASCII, with a marker travelling bead by bead around the circle.
Install
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { GraphJapa } from '@fractaldesign/machines-ui';Preview
a breath for every bead
<GraphJapa title="MALA" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. |
| animated | boolean | true | Animate the marker around the mala. Default true. Reduced motion freezes a mid-mala frame. |
| cols | number | 60 | Width of the scene in characters. Default 60. |
| rows | number | 22 | Height of the scene in rows. Default 22. |
| beads | number | 108 | Total beads per mala. The mala is 108; the counter shows current/total. Default 108. |
| speedMs | number | 110 | Milliseconds per bead. Default 110. |
| label | string | 'a breath for every bead' | Short caption under the art; the art itself is decorative. |
| 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 | |
| Bead | interface |
Theming
CSS custom properties this component reads.
- --graph-accent
- --text-muted
- --text-primary
- --text-secondary
Related
Built from
src/lib/components/animated/GraphJapa.svelte