Canvas Rain Background
Rain that falls over your whole page. One script tag to install, clicks pass straight through, and every setting is a data attribute on the same tag.
The code
<!-- The install snippet for this effect.
1. Press Run to see it on this page
2. Press Show to load the snippet
3. Press Copy and paste it before </body>
Options and setup notes are below. -->Questions
Do I need to host anything?
No. The script is served from this site, so the one line is the entire install. If you would rather self-host, press Show, take the file from the source and serve it yourself.
Will it cover my buttons and links?
No. The canvas sits on top visually but has pointer-events set to none, so every click and tap goes through to whatever is underneath.
Does it slow the page down?
At the default 220 drops it stays under a millisecond per frame on a mid-range phone. It draws lines, which is the cheapest thing a canvas does. Past about 600 drops older devices start to show it.
How do I make it look like a storm?
Raise data-count and data-angle together. Count alone gives dense drizzle, angle alone looks like wind. Around 450 count with 0.35 angle reads as heavy rain.
Can I use it on a light background?
Yes, but change the colour. Pass data-colour with darker RGB values, something like 60, 80, 110, and raise data-opacity-min so the drops stay visible.