PParable
All components

Matrix Rain

Visual Effects

The falling-glyph "digital rain" on a single canvas: monospace columns cascade downward with a bright white head, a coloured glow, a power-curve fading trail, and glyphs that mutate as they fall — all driven by one DPR-capped rAF loop that rebuilds on resize and idles off-screen via IntersectionObserver. Layout and the opening frame come from a fixed-seed PRNG so the first client frame is deterministic; under prefers-reduced-motion it paints a single dim static frame with no fall, and the aria-hidden canvas sits behind children on a z-10 layer.

Inspired by Componentry — Matrix Rain (free, MIT) — independently built, not affiliated. Attribution policy

system online
Follow the white rabbit

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/matrix-rain.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/matrix-rain.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<MatrixRain
    color="#22d3ee"
    fontSize={15}
    speed={1.1}
    fade={0.08}
    className="h-[320px] w-full rounded-xl bg-[#0f0f10] ring-1 ring-white/10"
  >
    <div className="flex h-[320px] flex-col items-center justify-center gap-3 px-6 text-center">
      <div className="inline-flex items-center gap-2 rounded-full bg-black/40 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.22em] text-cyan-300 ring-1 ring-white/10 backdrop-blur-sm">
        <Terminal size={13} aria-hidden />
        system online
      </div>
      <div className="text-2xl font-semibold text-white drop-shadow-[0_2px_14px_rgba(0,0,0,0.85)]">
        Follow the white rabbit
      </div>
    </div>
  </MatrixRain>

Props

MatrixRainProps extends React.HTMLAttributes<HTMLDivElement>

PropTypeDefaultDescription
colorstring"#22d3ee"Glyph colour for the falling trail. Head cells stay near-white and glow in this colour. Defaults to Parable signal cyan `#22d3ee` (mirrors the site's `--pb-signal` token). Any CSS colour string works.
glyphsstringDEFAULT_GLYPHSCharacter pool the columns draw from. Defaults to katakana + digits.
fontSizenumber16Cell size in CSS pixels — sets both the font size and column pitch.
speednumber1Fall-speed multiplier. `1` is a lively rain; `0` freezes mid-fall.
fadenumber0.08Trail fade factor. Higher fades trails shorter (roughly `1 / fade` cells), lower leaves long comet tails. Defaults to `0.08`.