Digital Rain
Warm amber character columns dissolving into zen ripples at the water surface.
What is Digital Rain?
Digital Rain is a free Canvas 2D web effect in the TappyPrism library. Warm amber character columns dissolving into zen ripples at the water surface. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (digital-rain.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Fall Speed, Column Density — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Fall Speed | FALL_SPEED | 0.3 – 3 | 1 |
| Column Density | COLUMN_DENSITY | 0.3 – 1 | 0.7 |
How to add Digital Rain to your page
- Download the standalone file digital-rain.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/digital-rain.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Digital Rain"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'FALL_SPEED', value: 1 }, '*');
Frequently asked questions
What is Digital Rain?
Digital Rain is a free Canvas 2D web effect in the TappyPrism library. Warm amber character columns dissolving into zen ripples at the water surface. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (digital-rain.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Fall Speed, Column Density — adjustable in the browser or at runtime.
How do I add Digital Rain to my website?
Download the standalone file at https://prism.tappypotato.com/fx/digital-rain.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/digital-rain.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Digital Rain"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'FALL_SPEED', value: 1 }, '*').