Fun
Rain on a window
Watch raindrops gather, merge and run down a misted pane over a blurred night city, a foggy forest or a photo of your own — with the patter of rain and distant thunder.
Behind the glass
Your photo stays on your device: it is drawn in this page and never uploaded or saved.
Want more rain sounds to mix? Use the rain sounds mixer.
F full screen · M sound on or off · Esc leaves full screen · the animation pauses while the tab is hidden, the rain sound keeps going
Also try the virtual fireplace or the virtual candle.
Play and explore in your browser. No account needed.
Frequently asked questions
How are the raindrops made?
Each drop is simulated: new drops land at random, small ones cling to the glass, and heavier ones build up an urge to slide until they break free, run and slow again — the stick-and-slip motion of real drops on a window. As a drop runs it leaves a trail of tiny droplets and gathers up the ones it crosses, and drops that touch merge into one with the same total volume. Your graphics card then treats every drop as a small lens, showing a shrunken, flipped and sharper view of the scene, while the misted glass around them shows it blurred.
Can I use my own photo behind the rain?
Yes. Choose “Your photo” and pick any JPG, PNG or WebP image — a view from your window, a street at night or a holiday snap. It is scaled to fill the screen, darkened slightly for an evening mood, blurred for the misted glass and refracted through each drop. It never leaves your device and is not saved, so after a reload the city scene returns.
Is the rain sound a recording?
No. It is synthesized in your browser with the Web Audio API: a steady wash of filtered noise for the rain, and a separate layer of tiny, quickly fading rings between about 1.5 and 6 kHz for drops tapping the glass. The rain slider balances the two. Thunder is made fresh for each strike from deep, low-passed noise that swells and rolls; near strikes start with a sharper crack, and far ones are duller and quieter. To mix rain with other sounds, try the rain sounds page.
Are the lightning flashes safe for photosensitive epilepsy?
Flashes are off by default and cannot be turned on while your device asks for reduced motion. When you do turn them on, a strike brightens the screen by at most half, flickers no more than three times in any second (the limit in the WCAG 2.3.1 accessibility guideline), and strikes come at least 15 seconds apart. That lowers the risk but cannot remove it, so if flashing light affects you or anyone watching, leave lightning off — the thunder works without it.
Why is there a delay between the flash and the thunder?
Light arrives almost instantly, but sound travels at about 343 metres per second, roughly 3 seconds per kilometre or 5 seconds per mile. With lightning on, each strike is given a random distance between about 1 and 8 km and its thunder is held back by that travel time, so a long pause means a distant storm and a crack right after the flash means a close one — the same count you can make in a real storm.
Will it drain my battery or keep running in the background?
The animation is drawn by the graphics card and stops completely when the tab is hidden or the screen is locked. The rain sound keeps playing in a background tab where the browser allows it, so you can listen with the screen off. With “Keep the screen awake” ticked, the page asks for a wake lock only while it is visible. On a laptop running for hours, plugging in is wise.
About this tool
This page recreates the view through a rainy window. Behind the glass is a scene drawn by code — a city at night with lit windows, neon and the soft circles of traffic and street lights, a pine forest fading into fog with one lit cabin, or strings of fairy lights — or a photo of your own. It is blurred for the misted pane, and a sharper copy is kept for what you see through the drops. Nothing is downloaded: there are no images or videos, only the page itself.
The rain is a small physics simulation. Drops land at random sizes, mostly small; fine droplets mist the glass; larger drops are heavy enough to slide, but surface tension holds them until enough weight or a merging neighbour sets it running. Running drops leave a line of droplets behind them, lose a little water to each, and sweep up whatever mist they cross. When two drops touch they join into one drop with their combined volume. Every frame, each drop is stamped into a “water map” that stores its surface slope and thickness, and a WebGL shader uses that map to bend the scene through the drop, darken its rim and add a small highlight.
The sound has two layers made on the spot: the steady wash of rain and the separate ticks of drops on the pane, which the rain slider balances. Distant thunder rolls in about once a minute; each roll is synthesized fresh from low rumbling noise with several swells, and near strikes open with a crack. Lightning is optional and off by default, dimmed and limited to three flickers a second, and turned off entirely for anyone whose device asks for reduced motion — who also get slower drops.
It works on phones, tablets, laptops and TVs in current browsers, full screen or in the page, with a Canvas 2D fallback where WebGL is unavailable. The animation pauses when the tab is hidden, and nothing about your photo or settings leaves your device; only the scene, rain amount, mist, volume and thunder choice are remembered in this browser. For a fuller rain sound mixer, use the rain sounds page.