Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Thunderstorm

A storm at night over the sea: forked lightning lighting the clouds, rain slanting through the flashes and a lighthouse beam turning in the dark. Loops perfectly.

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

In Light, glass & shine, Nature & weather, Spooky & Halloween

Next: Aurora BorealisSurprise me

Thunderstorm preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

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

Effect controls

Presets

5
1
1
1
0.25

The slant of the rain: negative leans the other way.

4

Changes when and where the lightning strikes, the shape of its forks and the clouds.

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

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

What it is

Banks of cloud that glow from inside when lightning strikes, forked bolts that grow down in a stepped leader and flash in a bright return stroke with two flickering re-strikes, sheets of light in the cloud and crawling discharges across it, rain slanting through the light, a dark heaving sea that catches every flash in a column of glitter, and, on the coast, a striped lighthouse turning its beam through the rain (or, out at sea, a small ship riding the swell). Choose the scenery, how many flashes there are in the loop, how hard it rains, how heavy the cloud is, how bright the lightning is and its colour (cold white, violet, amber or green), and the wind.

Reuse it in your own idea

  • Thriller or horror opener: Storm over the lighthouse behind a slow title.
  • Weather or news explainer: Distant storm, rain turned down.
  • Sleep or ambience loop: Open-sea tempest with the lightning dimmed.

Which part is reusable

src/thunderstorm.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • The sea, the coast and the clouds are flat layers drawn from noise, not a 3D scene; the lighthouse and the ship are silhouettes.
  • No thunder: the video has no sound.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/thunderstorm.js
Exports
  • createThunderstorm({ scenery?, strikes?, rain?, clouds?, brightness?, tint?, wind?, seed?, aspect?, loopSeconds? }) => { scene, camera, events, setSize(width, height), update(time, loopSeconds), dispose() }
  • createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }
  • planStorm({ strikes?, seed?, loopSeconds?, scenery?, aspect? }) => [{ kind, t0, xTop, yTop, xG, yG, segments }]
  • TINTS: { storm, violet, amber, green }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, instanced bolts and the bloom targets.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Orthographic: x from -aspect to aspect, y from -1 to 1; the horizon sits at y = -0.28 and the clouds fill the sky above it.

Lighting: Self-lit: each flash lights the clouds, rain, sea and coast in the colour of the lightning by its distance to the channel; the beam of the lighthouse lights the rain and the cloud.

Timing: update(time, loopSeconds) sets the time; each flash is a closed-form function of the seconds since it began, so frames render in any order.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — Every flash is scheduled round the loop and times itself with a modulo; the rain and the waves scroll through a texture that repeats a whole number of times a loop (every octave's multiplier along the scroll is a whole number); the clouds churn on circles of the noise and the beam and the ship turn and roll in whole cycles, so the last frame meets the first.
Tested
Rendered 360 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 with about 30 texture fetches a pixel, up to ten bolts of about a hundred instanced segments each, and a small bloom. About 14 ms a frame at 1080p on an integrated Intel GPU. More than ten flashes per loop need a larger array in the shader.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- thunderstorm/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:c4acf95552a8cf2d…
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/fire-weather/lightning-storm (with webgpu-lightning-bolt, webgpu-thundercloud and webgpu-supercell-storm, MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original scene: jagged forked channels with a stepped leader and re-strikes, clouds lit from within by each flash, scrolling rain, a heaving sea with glitter columns, a lighthouse with a turning beam, an exact loop and the frame/time contract.
BinMore like this

More like this

Play these full screen

Jellyfish

Background3DSeamless loop12 seconds

Neon Koi

Background3DSeamless loopPortrait8 seconds