Matrix Rain

`<pura-matrix-rain>` paints Matrix-style digital rain behind its slotted content: columns of katakana and digits fall on a Canvas 2D layer, the lead character glows and the trail fades out via the classic translucent fillRect pass. It is the iconic backdrop for dev, terminal and hacker sections, inspired by React Bits' Letter Glitch and Faulty Terminal. SSR and the pre-JS paint show a dark backdrop with a deterministic frozen glyph field (no `Math.random` in the template), so the section looks right with zero script, and reduced motion keeps that frozen field forever. Tune `speed`, `font-size`, `fade` and `glyphs`; theme with `--pura-matrix-rain-color`, `--pura-matrix-rain-lead-color`, `--pura-matrix-rain-bg` and `--pura-matrix-rain-font`. Each instance registers in `window.__puraMatrixRains` by `data-pura-id` with `pause()`, `resume()` and `refresh()` for agent control.

Preview

<!-- iconic terminal hero: green rain behind the headline -->
<pura-matrix-rain style="min-height: 60vh;">
  <div class="hero">
    <h1>Built for the terminal</h1>
    <p>Zero dependencies. Zero build step.</p>
  </div>
</pura-matrix-rain>

<!-- denser, faster, binary rain in custom colors -->
<pura-matrix-rain
  speed="2"
  font-size="12"
  fade="0.12"
  glyphs="01"
  style="height: 320px; --pura-matrix-rain-color: #38bdf8; --pura-matrix-rain-lead-color: #f0f9ff; --pura-matrix-rain-bg: #020617;">
  <div class="panel">Streaming logs</div>
</pura-matrix-rain>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/matrix-rain.js"></script>

import "./pura/lib/matrix-rain.js";