Skip to content

Aurora Tunnel

Flying down a corridor of shimmering aurora curtains that stream past towards you. Loops perfectly.

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

In Light, glass & shine, Nature & weather, Patterns & illusions

Next: Voronoi CellsSurprise me

Aurora Tunnel 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

1

Whole periods of the pattern that stream past in one loop.

1
1
4

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

Info

What it is

A tunnel lined with aurora: ribbons of green, teal, violet and magenta light hang from the walls of a cylindrical corridor, ripple and fold as they stream past, thin bright ridges where a curtain folds edge-on, with a soft glow and stars at the far end. Choose the colours (borealis, ember, glacier or toxic), the speed of the flight, the brightness, the stars and the seed.

Reuse it in your own idea

  • Visualiser backdrop: Borealis corridor.
  • Warm intro: Ember.
  • Tech opener: Glacier, fast.

Which part is reusable

src/aurora-tunnel.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 tunnel is a coordinate trick, not 3D geometry: there are no real curtains to fly between.
  • The flight is straight and constant: no turns or banking.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/aurora-tunnel.js
Exports
  • createAuroraTunnel({ palette?, speed?, brightness?, stars?, seed? }) => { scene, camera, setSize(width, height), update(time, loopSeconds), dispose() }
  • createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }
  • PALETTES: { borealis, ember, glacier, toxic }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and shader materials.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: The tunnel's axis points into the screen at the centre; distance down it is 0.45 / radius.

Lighting: Self-lit: the curtains' colours add up; the bloom gives the glow.

Timing: update(time, loopSeconds) sets the loop phase; frames render in any order.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — The pattern scrolls a whole number of its periods per loop and is built from the angle's cosine and sine at whole multiples, so it wraps round the tunnel and returns after the loop exactly.
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 twenty texture lookups per pixel and a small bloom. A few milliseconds a frame at 1080p on an integrated Intel GPU. Software WebGL renders in about a second a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- aurora-tunnel/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:2574ea86b73db655…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Adapted from the owner's threejs-sketches/light-atmosphere/aurora-tunnel (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original shader: ridged noise curtains on a circle-sampled baked texture, whole-period scrolling for an exact loop and a bloom.
BinMore like this

Jellyfish

Background3DSeamless loop12 seconds