Last week I rebuilt the website for my open-source app. The hero is a rain cloud made of characters ( .·:;!/?*%$&8#@ ). It drifts, it rains, and it bends a little around your cursor. Plain Canvas 2D, no WebGL, no library.

I built it with the usual performance tricks. Then I turned each one off and measured. Most of them did less than I thought. The biggest win was one I hadn't built.

How the field works

The canvas is a grid of cells, 9 × 15 CSS pixels each. On a 1920 px wide screen the hero canvas is 1920 × 846, so that's 214 × 57 = 12,198 cells . Most of them are dark sky. About 700 show a character at any moment.

Every frame, each cell asks the scene for a brightness between 0 and 1. For the cloud that's a few soft blobs, value noise on top, a flat underside like a real cumulus, and light from above. Brightness picks a character from a density ramp and one of 12 opacity levels. Rain drops are separate particles that write | , : and .…