Arabic Matrix Rain

June 15, 2026 · View on GitHub

A simple simulation of the Digital Rain sequence from The Matrix using Arabic symbols.

This is based on Xie's Green rain. Special thanks to her.

Arabic matrix rain demo

The yellow palette echoes the visuals in The Blue Elephant.

Run locally

npm install
npm run dev

Open the URL Vite prints (usually http://localhost:5173).

Build

npm run build
npm run preview

Static output is written to dist/.

Blog background

See docs/blog-background.md for how to embed the rain as a fixed background behind blog content, including layering, readability, platform notes (Astro, Next.js, static sites), performance, and accessibility.

Test Arabic characters

Open the charset test page while the dev server is running:

npm run dev
# then visit http://localhost:5173/charset-test.html

The page shows every character in the rain set in a table with:

  • Glyph — HTML rendering with Noto Naskh Arabic
  • Unicode / Decimal / Hex — code point values (Arabic uses Unicode, not ASCII)
  • Canvas — same font and size as the rain effect; a red outline means the glyph failed to paint

A second table lists excluded tashkeel (فتحة، ضمة، كسرة، سكون، شدة، …) so you can confirm diacritics never appear in the rain.

Stack

  • Native Canvas 2D (no p5.js)
  • Vite for dev server and production builds
  • Noto Naskh Arabic for proper Arabic glyph rendering