Svelte 5 component · machines-ui · Animated
GraphSurya
A sun wheel with breathing rays that rises from the horizon to its apex and sets again, forever; purely decorative.
Install
GraphSurya is a Svelte 5 animated ASCII surya 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 { GraphSurya } from '@fractaldesign/machines-ui';Usage
<GraphSurya title="DAWN" cols={52} rows={14} />Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
animated | boolean Animate the day cycle. Default true. Reduced motion freezes a mid-morning frame. | true |
cols | number Width of the scene in characters. Default 60. | 60 |
rows | number Height of the scene in rows. Default 18. | 18 |
speedMs | number Milliseconds per tick. Default 120. | 120 |
rays | number Number of spokes on the wheel. Default 12. | 12 |
seedNum | number Seed for the per-spoke length jitter. Default 5. | 5 |
label | string Short caption under the art; the art itself is decorative. | 'the mover of days' |
class | string | '' |
Related components
GraphTerminal A terminal session that types prompt lines and streams output, with optional looping animation.GraphTicker A single rotating row of health tokens such as `[ OK ] api`, each keeping its own status colour.GraphTypewriter Types lines of text one character at a time behind a blinking cursor, then optionally clears and repeats.GraphWorkflow A directed workflow laid out in character-art: nodes as boxes stacked in layers, edges drawn between them,…ShuffleText Animates text in by sliding each character through a scramble strip, with optional colour interpolation and…TextTyping Types a line of text one character at a time, restarting when the text changes or the line becomes active…