Svelte 5 component · machines-ui · Animated
GraphRain
A looping character-art rain animation with adjustable trails and dimensions.
Install
GraphRain is a Svelte 5 animated ASCII rain 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 { GraphRain } from '@fractaldesign/machines-ui';Usage
<GraphRain title="RAIN" cols={48} rows={12} />Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
animated | boolean Animate the rain. Default true. Reduced motion freezes a single frame. | true |
cols | number Width in character columns. Default 56. | 56 |
rows | number Height in rows. Default 16. | 16 |
speedMs | number Milliseconds per tick. Default 110. | 110 |
trail | number Trail length behind each head. Default 8. | 8 |
seedNum | number Seed for the reproducible rain. Default 5. | 5 |
label | string Short caption under the art; the art itself is decorative. | 'glyph rain' |
class | string | '' |
Related components
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.GraphState A four-state machine drawn in ASCII — ready, think, act, done — with the current state and its outgoing…GraphStream A live sparkline with the current value in large type, appending a new reading on an interval and counting…