FX-005 · Code Rain
Code rain for websites.
Real code falls behind the page in stepped redraws, line by line, and the newest line types itself out as it lands. By default it is the very scripts running on the page, so what rains is the code making the rain.
- Weight3.7 KB
- LibraryNone
- PhonesLighter
- Licence€39
Live · Real code
Real code, falling.
These are the scripts running this page. Move your pointer over the lines to scan them.
On touch screens it runs slower and at a lower resolution, and there is no pointer to scan with.
Live · Glyphs
Or single glyphs.
Set the mode to glyphs for falling columns of single characters.
Live · Your source
Your own files.
Point it at any script on your site. This one rains its own file.
01 — Details
What it does.
Real source
By default it reads the effect scripts already on the page, without comments or blank lines. You can point it at your own files.
A scanner for a pointer
The pointer lights up the lines it passes, in the accent colour.
Steps, not slides
It redraws like a terminal, so it reads as output rather than animation.
One canvas
It fades in after the page has loaded, pauses when the tab is hidden, and runs lighter on touch screens.
02 — Prompt
Free AI prompt.
Paste this into your AI coding tool to build the effect in your own stack. It carries the behaviour, the build and the traps we hit in production. It is free for pitches and personal work.
Build a code rain background for this website on a single canvas, in plain JavaScript. Behaviour - Streams of real source lines fall down the page in lanes as wide as a line of code. The newest line types itself out in an accent colour as it lands, and older lines fade above it. - It steps like a terminal redraw, about every 90ms, rather than gliding. - The pointer works like a scanner, lighting up the lines it passes. Build - Use one fixed canvas behind the page with pointer-events: none. Size it to the viewport times devicePixelRatio, capped at 2. - Fetch the site's own scripts with cache: 'force-cache' a moment after load. Strip comments and blank lines, and trim lines to about 46 characters. Keep a short fallback list for until they arrive. - Measure one character with measureText to size the lanes, and switch lanes on at random for a density around 0.7. - Read colours from CSS custom properties, so themes recolour it live. Must hold - Start it after the page has loaded and fade it in, so it never competes with the first paint. - Keep it faint behind body text, and check contrast on every theme. - Pause while the tab is hidden. On touch screens, step slower and cap the resolution at 1.5. - With prefers-reduced-motion, draw one still frame. - Remove the canvas and listeners on teardown. Done when the text above it stays easy to read, it costs almost nothing on a phone, and switching theme recolours it without a reload.
03 — Code
Or drop it in.
With a licence, the finished effect is one attribute. The small runtime fetches what it needs and removes everything again if the element goes.
<script src="/fx/sitefx.js"></script> <!-- Fixed behind the whole page --> <body data-fx="rain"> <!-- Or inside one element --> <section data-fx="rain" data-fx-rain-src="/app.js">
| Option | Default | What it does |
|---|---|---|
| data-fx-rain-mode | code | code for lines, glyphs for single characters |
| data-fx-rain-src | — | Scripts to read, split by commas |
| data-fx-rain-size | 12 | Type size in pixels |
| data-fx-rain-density | 0.7 | Share of lanes raining |
| data-fx-rain-step | 90 | Milliseconds per redraw |
| data-fx-rain-trail | 14 | Lines or glyphs per stream |
04 — FAQ
Questions.
Does it slow the page down?
It starts after the page has loaded, redraws about eleven times a second on one canvas, and pauses when the tab is hidden. Touch screens get a slower, lower-resolution version.
Is the code really from the site?
Yes. By default it reads the effect scripts already on the page. One attribute points it at your own files.
Does it need a library?
No. It runs on the small SiteFX runtime alone.
Can it sit inside one section?
Yes. On the body it sits fixed behind the page, and on a section it stays inside that element.
Licence
Code Rain · €39
One effect, yours to keep. Unlimited client projects, 1 developer, 12 months of updates. Prices exclude VAT.