animated

Rain

A looping character-art rain animation with adjustable trails and dimensions.

Install

pnpm add @fractaldesign/machines-ui

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

Preview

[ RAIN ]

   t  █░   y  s 7 ▓di1  ▒8  g█  m u3 tq ha░w  rw
   l   x   ub ░ 1 █▒█e  83  p   j xf n█ k▒f█  so
   2   8   74 jmj  f u  5█  w   q az 1  6▓▓ 3 5y
   q   9   us bwl  f ░  7   z   r █i p  7tv p ██
   █   vn  e0 g7v  7 █  l   p   y  █ 3  8or r   
       ld  7▒ cl0  p    n   5   █    e  █si s   
       ░f  █2 █h█  █    █   █ q      █   u█ k   
       █2   j  ░              a          █  w   
        k   o  ▒              g  k          v   
        g   █  ░              w  9          x   
  i     v      █              3  ▓          █   
  k     m                     f  n

glyph rain

<GraphRain title="RAIN" cols={48} rows={12} />

Props

Prop	Type	Default	Description
title*	string	—	Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
animated	boolean	true	Animate the rain. Default true. Reduced motion freezes a single frame.
cols	number	56	Width in character columns. Default 56.
rows	number	16	Height in rows. Default 16.
speedMs	number	110	Milliseconds per tick. Default 110.
trail	number	8	Trail length behind each head. Default 8.
seedNum	number	5	Seed for the reproducible rain. Default 5.
label	string	'glyph rain'	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
Drop	interface
Seg	interface

Theming

CSS custom properties this component reads.

--graph-accent
--text-muted
--text-primary
--text-secondary

Built from

src/lib/components/animated/GraphRain.svelte

Install

Preview

Props

API

Types

Theming

Related