Glyph Rain is a canvas specimen in this vitrine: columns of glyphs falling on, each trail dimming character by character. It exposes 15 parameters, runs continuously, and was added on 11 August 2026.
| Kind | Canvas |
|---|---|
| Lifecycle | ambient |
| Motion | continuous:position+opacity |
| Stage role | background |
| Themes | light · dark |
| Parameters | 15 |
| Added | 2026-08-11 |
Each of the 15 parameters below is a real control in the panel. The reasoning is first-hand: where a bound comes from a measured property of the work, that measurement is named.
0.9–3 em, default 1.6
Measured in multiples of the font size, so changing the size leaves the relationship between the columns untouched. The lower bound of 0.9 is the width of the glyphs themselves — below it the columns start overprinting one another. Past 3 they are too far apart to read as rain at all.
1–2.6 em, default 1.6
A lower bound of 1 means the line height equals the font size and the glyphs touch. That is a typographic floor, not a taste judgement.
8–28 px, default 13
Nothing in the implementation forces these two numbers, but what they control is measurable. Glyph size is the only thing that sets the physical scale of the work: everything else is counted in cells, and a cell is fontSize * cellRatioX wide by fontSize * cellRatioY tall. At the default ratio of 1.6 the column pitch runs from 12.8 px at the floor to 44.8 px at the ceiling — on the 560 px stage this specimen is captured at, that is about 43 columns down to 12. Below roughly a dozen columns the field stops reading as rain and becomes a handful of separate streaks.
Changing it rebuilds the grid (rebuild: true), which is why the columns restart rather than reflow.
0.1–1, default 0.92
0–1 is a proportion: how many of the columns are raining. The lower bound of 0.1 keeps enough of them running to still read as rain rather than as a few stray marks.
0–0.9, default 0.26
The ceiling is 0.9 rather than 1 because at 1 the rain empties out completely, and an empty canvas is not a setting anyone is choosing.
3–60, default 28
Counted in glyphs, not pixels — so the visual length of a trail follows the font size and the proportion stays put. It also sets the size of each column history buffer, which is why changing it has to rebuild.
0.2–14, default 8
Not yet derived — tuned by eye. See the list below.
0–1, default 0.7
At 0 every column falls at the same speed, and a tidy row of things moving together reads as a machine rather than as rain. Same principle as the incommensurable angular speeds in No.002: regularity is the enemy.
0–20 /s, default 4.4
Not yet derived — tuned by eye. See the list below.
colour, default #c6d4e8 (dark) / #33455e (light)
Two values, not one. The two themes can share neither the colour nor the alpha that goes with it — but not for the reason it first appears. These two inks are not mirror images of each other: one is a near-white, the other only a mid-slate, so the pairing has to be solved rather than reflected. See the alpha below.
0.05–1, default 0.66 (dark) / 0.85 (light)
Two values again, and — against the intuition — the light one sits higher. The two inks are not mirror images: the dark ink is a near-white on black, while the light ink is only a mid-slate on near-white, so equal opacity leaves the light theme several times fainter. This value is solved rather than chosen: it is the opacity at which the peak glyph reaches the same contrast ratio against its ground as the dark theme does against its own — the same method the cabinet uses for its own ink scale. Colour and opacity are bound together here, so switching theme carries the alpha across with the colour; swapping the colour on its own leaves the rain muddy.
0.7–0.995, default 0.93
The per-glyph brightness falloff. The ceiling is 0.995 rather than 1: at exactly 1 a trail never fades and the screen fills up for good. That is a runaway, not one more look to choose from.
20–100 %, default 64
The height of the canvas inside its host, as a percentage — it is written straight into --rain-h. The ceiling of 100 is structural: at 100 the rain fills the frame, and there is nothing above that to fill. The floor of 20 is not forced by anything; what it marks is roughly where the band gets thin enough that a trail no longer has room to fade out before it reaches the bottom — the trail is 28 cells long by default, which at the default glyph size is about 580 px of fall.
40–160 %, default 80
The horizontal radius of the mask ellipse, as a percentage of the element — radial-gradient(var(--mask-w) 100% at 50% -6%`, …). Values above 100 are meaningful and that is why the ceiling is 160: past 100 the ellipse is wider than the element, so the fade never fully closes at the left and right edges and the rain runs off the sides instead of tapering. The floor of 40 is not forced; below it the lit area narrows to a column down the middle.
30–100 %, default 72
This floor is forced by another value in the same gradient. The mask is #000 0%, #000 var(--mask-a), transparent var(--mask-b) with --mask-a hardcoded at 28%. A gradient stop that falls before the one preceding it gets clamped to it, so any Fade distance at or below 28 collapses the soft edge into a hard one. The floor of 30 sits just above that. The ceiling of 100 is the far edge of the element: beyond it the transparent stop is outside the box and the fade never completes.
2 parameters were tuned by eye. They are listed rather than dressed up: an invented reason would be worse than an admitted gap.
Tuned by eye: speed · mutate
The popularity of this form is owed to the opening titles and terminal screens of The Matrix (1999). This implementation copies neither its glyph set nor its colours — it uses Latin letterforms and a cool grey-blue. A form in the public domain needs attribution, not permission.
Open the panel to change any parameter above and watch it apply immediately. From there the work leaves as a link, as source, as a PNG, or as a video.