matrix-rain-webgpu

A Matrix-style "digital rain" background effect for React, rendered on the GPU with WebGPU via TypeGPU. GPU-driven simulation, signed-distance-field glyphs, depth parallax, bloom, and a CRT post-process.

▶ Live demo & full documentation: https://chicio.github.io/matrix-rain-webgpu/

It powers the animated background on fabrizioduroni.it. Requires a WebGPU-capable browser (recent Chrome / Edge / Safari / Firefox).

Install

npm install matrix-rain-webgpu react react-dom typegpu @typegpu/react @typegpu/noise

react/react-dom (v19) and typegpu/@typegpu/react/@typegpu/noise (v0.11) are peer dependencies — they must resolve to a single instance in your app, so you install them yourself. The shaders are pre-compiled at publish time, so you do not need any TypeGPU build plugin.

Module resolution: the published types target bundler-style resolution (moduleResolution: "bundler" / "node"), which is what Vite, Next.js, and most React setups use. Strict "node16"/"nodenext" resolution isn't supported yet.

Usage

The component renders a <canvas> that fills its positioned parent and ignores pointer events:

import { MatrixRainWebGPU } from 'matrix-rain-webgpu';

export function Background() {
  return (
    <div style={{ position: 'relative', width: '100%', height: '100dvh' }}>
      <MatrixRainWebGPU />
    </div>
  );
}

Everything is optional and grouped — omit for defaults, pass an object to tune, or false to disable an effect:

<MatrixRainWebGPU rain={{ fontSize: 24 }} bloom={{ intensity: 2 }} crt={false} />

WebGPU isn't available everywhere; gate on isWebGPUSupported() and render your own fallback when it's missing:

import { MatrixRainWebGPU, isWebGPUSupported } from 'matrix-rain-webgpu';

return isWebGPUSupported() ? <MatrixRainWebGPU /> : <My2DFallback />;

Documentation

Full docs live on the site — including the interactive playground:

• Getting started & Public API — install, props, recipes.
• Architecture — how the pieces connect.
• How it works — per-component deep dives, with the computer-graphics concepts and the math.
• Playground — the live demo with every knob exposed.

Local development

This repo is two packages: the publishable library at the root (src/) and the docs + demo site (docs/, an Astro + Starlight app).

# Library — typecheck + lint/format
npm install
npm run types
npm run check

# Docs + demo site (Astro)
npm --prefix docs install
npm --prefix docs run dev

Author

Built by Fabrizio Duroni. If you enjoy it, a visit to the site is the best way to support the work. Also don't forget ⭐ to star this repository ⭐.