Rain on Glass
Ultra-realistic water droplets on a window, refracting a blurred city night with realistic trail physics.
What is Rain on Glass?
Rain on Glass is the odd one in the library because it is a hybrid. Droplet sprites are generated procedurally into an offscreen canvas and stamped onto a droplet map with real trail physics: a drop only starts sliding once it has gathered enough mass, and it leaves a residue trail that later drops follow. That map is then handed to a WebGL shader that refracts a blurred night scene behind it. Splitting it this way keeps the expensive part, the refraction, on the GPU, while the stateful part, where every drop is and where it has been, stays on the CPU where it is cheap to simulate. Rain amount and refraction strength are the live parameters, and it honours prefers-reduced-motion.
Rain on Glass is a free WebGL web effect in the TappyPrism library. Ultra-realistic water droplets on a window, refracting a blurred city night with realistic trail physics. It is rendered on the GPU by a fragment shader, so it costs almost nothing on the CPU and works well as a full-screen background. It ships as a single self-contained HTML file (rain-on-glass.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Rain Amount, Refraction Strength — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Rain Amount | RAIN_AMOUNT | 0.1 – 2 | 1 |
| Refraction Strength | REFRACTION | 0.1 – 3 | 1 |
How to add Rain on Glass to your page
- Download the standalone file rain-on-glass.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/rain-on-glass.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Rain on Glass"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'RAIN_AMOUNT', value: 1 }, '*');
Frequently asked questions
What is Rain on Glass?
Rain on Glass is the odd one in the library because it is a hybrid. Droplet sprites are generated procedurally into an offscreen canvas and stamped onto a droplet map with real trail physics: a drop only starts sliding once it has gathered enough mass, and it leaves a residue trail that later drops follow. That map is then handed to a WebGL shader that refracts a blurred night scene behind it. Splitting it this way keeps the expensive part, the refraction, on the GPU, while the stateful part, where every drop is and where it has been, stays on the CPU where it is cheap to simulate. Rain amount and refraction strength are the live parameters, and it honours prefers-reduced-motion. Rain on Glass is a free WebGL web effect in the TappyPrism library. Ultra-realistic water droplets on a window, refracting a blurred city night with realistic trail physics. It is rendered on the GPU by a fragment shader, so it costs almost nothing on the CPU and works well as a full-screen background. It ships as a single self-contained HTML file (rain-on-glass.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Rain Amount, Refraction Strength — adjustable in the browser or at runtime.
How do I add Rain on Glass to my website?
Download the standalone file at https://prism.tappypotato.com/fx/rain-on-glass.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/rain-on-glass.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Rain on Glass"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'RAIN_AMOUNT', value: 1 }, '*').