GraphRain

Advance every column; heads step on their own cadence and respawn once clear.

Import

svelte

import { GraphRain } from 'markgraphy';

Basic usage

svelte

<GraphRain
  title="example"
  animated={true}
  cols={56}
/>

[ example ]

   i       o  5 i ov 1  03  q   3 bq wy tbjq  rx       r
   p   2   w  b x od e  uh  g   m am pg va░█  s5       j
   l   ░   y  s 7 █▒ u  o█  p   j xl t█ obn   5o      uf
   3   x   ib ░ ▒  1 ░  8   w   6 az v  sq▓   █y      j6
   q   k   bc 5 j  f █  u   z   w █i 1  7tv    █      r▒
   █   9   ug y l  2    ▒   b   7  █ 0  1fr 3         2u
       v   ▒2 gmv  p    l   y   █    8  █7i p      u  zx
       lj  7r cl0  █    a   █        e   o█ z      3  ou
       ░d  █k █7█       █            █   █  y      c r5█
       █f   j  ▓                            k      h dt 
        ▓   1  h              q             3      3 3█ 
        k   █  f              u             v      3 f  
        g      5              4             x      3 p  
        v      ░              w             █      ░ f  
        m      █              3  k                 █ p  
        █                     f  9                   k

glyph rain

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`	`''`	—

Exported types

GraphRainProps

Reduced motion

Animation is disabled under prefers-reduced-motion.