Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Rainy Window

Rain running down a misted window at night, the city lights blurred into soft bokeh behind it. Loops perfectly.

Background, V1 Effects3DSeamless loop, verified694 lines of codev1.0.0

In Light, glass & shine, Liquids, Nature & weather

Next: Neon KoiSurprise me

Rainy Window preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Open in the title maker

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

0.6
0.5
1
1

A short word or two, as if written with a fingertip. Leave empty for none.

1

Changes where the drops are and how they run.

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 2.6 MB)
Info

What it is

Looking out through a wet window: the street beyond is out of focus, its lamps, car lights and neon melted into round bokeh, while the water on the glass is sharp. Small beads land and merge away; larger drops slide down in fits and starts, clearing a trail through the condensation that slowly mists over again, and every drop holds a tiny upside-down picture of the lights. Choose the view (city night, neon street, golden hour or a grey morning with trees), how hard it rains, how misted the glass is, the drop size and the blur, and optionally write a word in the mist as if with a fingertip.

Reuse it in your own idea

  • Lofi stream: City at night, rain 0.5, behind a small music player or a quote.
  • Music video: Neon street with the camera's own footage on a screen in frame.
  • Short film: Grey morning with a heart in the mist as a quiet opening shot.

Which part is reusable

src/rain-window.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses neon-sign only for the demo.

Good to know

  • Drops follow designed paths rather than a fluid simulation: they never merge with each other on the way down.
  • The written word uses Neon Sign's alphabet: Latin letters with accents, digits and common punctuation.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/rain-window.js
Exports
  • createRainOnGlass(renderer, { width, height, rain?, fog?, size?, blur?, refraction?, highlights?, mist?, wipe?, seed?, exposure?, grain? }) => { render({ background, time, loopSeconds, output? }), dispose() }
  • createRainScene(renderer, { scene?, width, height, seed? }) => { texture, render(time, loopSeconds), dispose() }
  • RAIN_SCENES: ['city', 'neon', 'dusk', 'morning']
Dependencies (exact)
  • three@0.185.1 (source) — Renderer and the glass, bokeh and backdrop shaders.
  • neon-sign@1.0.0 (demo) — Its tube alphabet for the word written in the mist.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Screen space; drop sizes are fractions of the frame height, so the look holds at any resolution.

Lighting: Self-contained: the backdrops are in linear light, and the drops refract the in-focus picture and catch a highlight from the room.

Timing: Everything is a pure function of time within the loop; frames render in any order.

Output
1080×1080, 30 fps, 10 s · procedural (computed from the frame number) · seamless loop — Every drop lands, slides and is absorbed a whole number of times per loop, trails mist over by age since the last pass, and the traffic and signals behind repeat with the loop, so the last frame meets the first.
Tested
Rendered 300 frames on 2026-10-06 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
One full-screen pass for the glass (each pixel checks the few drops near it) and a small blur chain at a quarter and an eighth of the size. Smooth at 1080p on laptop GPUs. Software WebGL (no GPU) renders slowly. On phones, render at a lower resolution and scale up.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- rain-window/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:0e7071d4372d2a38…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
Provenance
Adapted from the owner's threejs-sketches/liquid-fluid/webgpu-rain-window (MIT), rebuilt for AI Pixel Wizard in October 2026 in WebGL as a frame-exact loop: designed bead and sliding-drop paths instead of a simulation, real round-aperture bokeh, refracting drops, mist that clears and returns, four backdrops, and the frame/time contract.
BinMore like this

More like this

Play these full screen

Neon Koi

Background3DSeamless loopPortrait8 seconds

Jellyfish

Background3DSeamless loop12 seconds