Curtains of oxygen and nitrogen light on tilted field lines, mirrored in a lake.
Each curtain is a sheet of magnetic field lines standing on a folded footprint that runs east to west, rippled by kinks traveling along the arc. Every ray climbs its field line at the 78 degree magnetic dip, over a curved Earth, so distant curtains sink toward the horizon and overhead ones stream down from the zenith. Color comes from altitude: oxygen's green line glows from about 100 to 150 km with a sharp lower edge, its slow red line survives only above 200 km, and in strong storms harder electrons reach 90 km and fringe the bottom with nitrogen pink. Rays deposit their emission into a floating point buffer, which is blurred for glow, auto exposed and mirrored row by row into the lake through the camera's projection.
Try it. Use the storm slider (or the up and down arrow keys) to go from a quiet arc on the horizon to a severe storm overhead. Click the sky to set off a substorm surge there, or press space. Drag or use the left and right arrow keys to look around, and press F (or the button) to show field lines with electrons spiraling down them. R resets.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an aurora borealis scene with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window. Paint a night sky gradient (near black overhead, deep blue-green near the horizon) with a few hundred stars, and a dark treeline silhouette across the lower third.
- Model one aurora curtain in 3D: a footprint that runs from west to east about 300 km north of the viewer, wiggled by a few sine waves, at about 100 km altitude. The curtain is made of vertical rays rising from that footprint up to about 300 km.
- Project points with a simple perspective camera standing on the ground and looking north, tilted slightly up.
- For each ray, step up in altitude and color each step by height: green (oxygen at 557.7 nm) strongest from 100 to 150 km with a sharp bottom edge, fading to red (oxygen at 630 nm) above 200 km.
- Draw the rays as thin lines with globalCompositeOperation = "lighter" so overlapping light adds up and glows.
Once that works, make it beautiful:
- Render the rays into a small offscreen canvas, blur a copy for glow, and draw both scaled up.
- Vary brightness along the curtain with drifting noise and fine streaks, and animate the wiggles so folds travel along it.
- Mirror the sky in a still lake under the treeline, darkened and gently rippled.
- Add a storm slider that brings the curtain closer and brighter and adds a pink nitrogen fringe at the bottom.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as tilting the rays along the magnetic field so overhead curtains form a corona, several layered curtains, or click-triggered substorm brightenings.
