Rishav Sharma Pet project

GitHub LinkedIn Medium Email CV

Pet project · May 2025 in review

Matrix terminal

A command line over falling-code rain, hidden at /matrix, and how the rain actually works.

JavaScript Canvas 2D CSS Vite

What it is

The Matrix terminal is the other half of this site, and it used to be the front page. It now lives at rvs23.dev/matrix. You type whoami, skills or rain, and it answers. Behind it, a full-screen canvas draws the digital rain from The Matrix. There is no framework: plain HTML, CSS and JavaScript, built with Vite.

The idea behind the rain

The obvious way to draw falling code is to move letters down the screen. The film does something else, and so does this site: the letters stay put, and the light moves.

7 Z 4 B F 2 0 F 8 Z 7 6 F Z Z F C 4 7 4 X C 0 2 5 1 9 0 8 F C D C E 4 B 3 1 4 F 6 8 D 9 D X C B Z D 7 A 0 8 5 A Z 3 6 8 9 3 2 F F 2 B 2 D 4 0 9 D D 3 1 1 C A Z 8 X 7 1 9 0 2 3 Z 1 6 D 9 8 4 1 A A B 4 C C E X C Z 3 X 8 D 7 9 trail: fades back to black head: the brightest cell moves down one row a tick the letters never move; only the light does
Fig. 1 — Streams don't move letters. They move brightness down a fixed grid of glyphs.
  • A fixed grid. Every cell on screen holds a glyph and a brightness from 0 to 1.
  • Streams are cursors. Each one moves down a column, setting the cell under it to full brightness.
  • Everything fades. Every frame, every cell loses a little brightness, so a trail forms behind each cursor and dies away on its own.
  • Glyphs change in sync. A few cells swap their glyph on the same frame, which is the shimmer you notice in the film.

About sixty times a second the loop decays the grid, mutates a few glyphs, advances the streams and repaints.

Going deeper

Two longer primers in the repo walk through the code for someone who can program but is new to the web: the page and its skin (HTML and CSS) and the terminal and the rain (the JavaScript).