{"id":"rain-window","version":"1.0.0","title":"Rainy Window","summary":"Rain running down a misted window at night, the city lights blurred into soft bokeh behind it. Loops perfectly.","kind":"background","target":"three","collections":["backgrounds","hypnotic-loops"],"tags":["rain","window","raindrops","glass","bokeh","city lights","night","cozy","lofi","mist","condensation","loop"],"loopable":true,"motion":"procedural","durationSeconds":10,"status":"published","media":{"poster":"https://aipixelwizard.com/media/rain-window/1.0.0/poster.webp","preview":"https://aipixelwizard.com/media/rain-window/1.0.0/preview.mp4","sample":"https://aipixelwizard.com/media/rain-window/1.0.0/sample.mp4","sampleBytes":2731091,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/rain-window","manifest":"https://aipixelwizard.com/api/v1/visuals/rain-window/versions/1.0.0","agentMd":"https://aipixelwizard.com/registry/rain-window/1.0.0/agent.md","files":"https://aipixelwizard.com/registry/rain-window/1.0.0/","demo":"https://aipixelwizard.com/registry/rain-window/1.0.0/index.html"},"description":"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.","role":"Background (WebGL, full frame): a moody, cosy rain-on-glass loop for lofi, music and storytelling.","useCases":["A lofi, study or sleep stream background that loops for hours","A melancholy or romantic beat in a music video or short film","A cosy backdrop for quotes, poems and podcast clips"],"synonyms":["rain on glass","rainy window","raindrops on window","rain drops background","lofi rain","cozy rain","rainy night city","foggy window","steamy window","bokeh lights"],"digest":"0e7071d4372d2a38b16e5a717fb51a798cbae15274c4e6fd3f5fa9089d713469","implementation":{"target":"three","runtime":"browser","language":"javascript","module":"esm","entry":"src/rain-window.js","exports":[{"name":"createRainOnGlass","signature":"createRainOnGlass(renderer, { width, height, rain?, fog?, size?, blur?, refraction?, highlights?, mist?, wipe?, seed?, exposure?, grain? }) => { render({ background, time, loopSeconds, output? }), dispose() }","description":"Rain, mist and bokeh over any background texture (a photo, a video or another scene), drawn to the canvas or a render target."},{"name":"createRainScene","signature":"createRainScene(renderer, { scene?, width, height, seed? }) => { texture, render(time, loopSeconds), dispose() }","description":"The four built-in views behind the glass, in linear light with real highlights, so they bloom into bokeh."},{"name":"RAIN_SCENES","signature":"RAIN_SCENES: ['city', 'neon', 'dusk', 'morning']","description":"Names of the built-in views."}],"reusable":["src/rain-window.js"],"demo":"demo.js","harness":"index.html"},"dependencies":[{"id":"three","version":"0.185.1","scope":"source","reason":"Renderer and the glass, bokeh and backdrop shaders."},{"id":"neon-sign","version":"1.0.0","scope":"demo","reason":"Its tube alphabet for the word written in the mist."},{"id":"apw-runtime","version":"1.0.0","scope":"demo","reason":"Demo harness."}],"uses":[],"usedBy":[],"params":[{"key":"scene","label":"View","type":"select","default":"city","options":[{"value":"city","label":"City at night"},{"value":"neon","label":"Neon street"},{"value":"dusk","label":"Golden hour"},{"value":"morning","label":"Grey morning"}]},{"key":"rain","label":"Rain","type":"number","min":0,"max":1,"step":0.05,"default":0.6},{"key":"fog","label":"Mist on the glass","type":"number","min":0,"max":1,"step":0.05,"default":0.5},{"key":"dropSize","label":"Drop size","type":"number","min":0.6,"max":1.6,"step":0.05,"default":1},{"key":"blur","label":"Background blur","type":"number","min":0.4,"max":1.6,"step":0.05,"default":1},{"key":"message","label":"Written in the mist","help":"A short word or two, as if written with a fingertip. Leave empty for none.","type":"text","default":"","maxLength":16,"sensitive":true},{"key":"seed","label":"Seed","help":"Changes where the drops are and how they run.","type":"integer","min":1,"max":999,"step":1,"default":1}],"presets":[{"id":"default","label":"City at night","params":{}},{"id":"neon","label":"Neon street","params":{"scene":"neon","rain":0.75,"fog":0.35,"seed":4}},{"id":"dusk","label":"Golden hour","params":{"scene":"dusk","rain":0.45,"fog":0.4,"dropSize":1.2,"seed":9}},{"id":"morning","label":"Grey morning, a heart in the mist","params":{"scene":"morning","rain":0.7,"fog":0.7,"message":"♥","seed":12}}],"output":{"width":1080,"height":1080,"fps":30,"durationSeconds":10,"posterSeconds":4,"alpha":false,"motion":"procedural","loop":{"seamless":true,"cycleSeconds":10,"method":"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."},"seed":{"param":"seed","behavior":"Seed places the drops, their paths and timing, and the buildings and lights behind: same seed, same window."}},"composition":{"inputs":"Time within the loop and a background texture (the built-in views, or any picture, video or render target).","outputs":"A full frame: the background out of focus behind wet, misted glass.","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.","compatibleWith":["kinetic-title","gradient-background","page-turn"],"notes":["The written word is treated as private: not stored in shared packs unless you choose to include it.","Over your own footage, pass a texture as background and set highlights to about 0.5 so bright spots bloom into bokeh.","The finger-written lettering comes from Neon Sign's tube alphabet."]},"reuse":["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."],"integration":{"newProject":"Create a WebGLRenderer, createRainScene and createRainOnGlass at the canvas size, then each frame call backdrop.render(time, loop) and glass.render({ background: backdrop.texture, time, loopSeconds: loop }).","existingProject":"Copy src/rain-window.js. Render your scene (or play a video) into a texture and pass it as the background; draw the glass as the last full-screen pass."},"performance":{"notes":"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.","limits":"Software WebGL (no GPU) renders slowly. On phones, render at a lower resolution and scale up."},"limitations":["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."],"license":{"spdx":"MIT","notice":"Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.","thirdParty":[{"name":"three.js","version":"0.185.1","license":"MIT","url":"https://github.com/mrdoob/three.js"}]},"rights":{"approvedForPublicRelease":true},"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.","changelog":[{"version":"1.0.0","date":"2026-10-05","notes":"Initial release."}],"verification":{"testedOn":"2026-10-06","inputs":{"rain-window@1.0.0":"0e7071d4372d2a38b16e5a717fb51a798cbae15274c4e6fd3f5fa9089d713469","three@0.185.1":"664ca387e5fab46ff2daaa6895e1d015426850891af5ea5082cbbcc3985b068c","neon-sign@1.0.0":"70b3f0e2e4553acdaa14a16a5179b2bf6dd12f576a00a85202b8d2ad239904f3","apw-runtime@1.0.0":"5be859cdac74823ba0bcc32c6daf06688a871104d24db5d4ceaffffd84d7c40d"},"environment":"Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0","renderer":"WebGL 2 via SwiftShader (software)","width":1080,"height":1080,"fps":30,"frames":300,"renderSeconds":1524.5,"loopCheck":{"checked":true,"seamless":true,"maxDifference":0,"note":"Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255."},"determinism":{"checked":true,"identical":true},"errors":[],"media":{"poster":"/media/rain-window/1.0.0/poster.webp","preview":"/media/rain-window/1.0.0/preview.mp4","sample":"/media/rain-window/1.0.0/sample.mp4","sampleBytes":2731091}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/rain-window/1.0.0/LICENSE"},{"path":"asset.json","size":9484,"sha256":"ea3aef5d51f9ecef2a993f4f89a8bfa28cc54783a3a394043f77dda88716a46d","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/rain-window/1.0.0/asset.json"},{"path":"demo.js","size":3423,"sha256":"6633f4d4cd29a67b7b17a38fb4fab134396f5753a03a425323375ae628f307cd","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/rain-window/1.0.0/demo.js"},{"path":"index.html","size":525,"sha256":"45be764b13666426b8feef10b28aa5acfdb1305f9f2509801058dc82767f8a36","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/rain-window/1.0.0/index.html"},{"path":"src/rain-window.js","size":29885,"sha256":"f6144a9032e1675dbc9d0fbefbba676c981e4bd0516bb66ec114ac668befda18","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/rain-window/1.0.0/src/rain-window.js"}],"warnings":[]}