Curtains That Follow the Field

The Aurora sketch layers five moving bands so the sky reads like folded light instead of a generic animated gradient.

Aurora displays are easy to flatten into wallpaper. The actual phenomenon is stranger and more structured than that. NOAA's aurora explainer describes electrons accelerated through Earth's magnetosphere, guided toward the polar atmosphere, and released as visible light when oxygen and nitrogen return from excited states. EarthSky's overview makes the same mechanism legible from the ground: charged particles arrive from the sun, the atmosphere lights up, and the display often appears as curtains, arcs, and spirals that trace magnetic structure rather than random glow. Those forms provide the frame for this sketch. It treats the aurora as a set of luminous folds moving across the sky.

The gallery version builds bands instead of particles. Each band gets a base height, thickness, hue, speed, and frequency, then the render loop draws them back to front so the sky accumulates depth through layered motion. The layered bands resemble NOAA's descriptions of auroral curtains that stretch, sway, and expand across the horizon. The animation focuses on coherent vertical structure, a dark field to move through, and enough variation in wave motion that neighboring ribbons never collapse into a single stripe.

const BANDS=[
  {baseY:0.30, thick:0.12, hue:145, sat:100, lit:60, spd:0.006, freq:2.1, ph:0.0, alpha:0.55},
  {baseY:0.25, thick:0.08, hue:170, sat:100, lit:65, spd:0.009, freq:3.3, ph:2.1, alpha:0.45},
  {baseY:0.35, thick:0.14, hue:280, sat: 90, lit:65, spd:0.007, freq:1.8, ph:4.4, alpha:0.38},
  {baseY:0.20, thick:0.07, hue:195, sat:100, lit:70, spd:0.005, freq:4.0, ph:1.6, alpha:0.42},
  {baseY:0.40, thick:0.10, hue:130, sat:100, lit:55, spd:0.010, freq:2.7, ph:3.0, alpha:0.35},
];

The motion works because the wave function is layered in the same way. One sine term would produce a decent ribbon, but it would also announce its own regularity too quickly. The sketch mixes frequencies and phase offsets so the top and bottom edges of each band drift out of sync. That is enough to keep the curtain breathing.

function wave(x,t,freq,phase,speed){
  return Math.sin(x*freq+t*speed+phase)*0.7
       + Math.sin(x*freq*0.43+t*speed*1.3+phase+1.2)*0.3;
}

I like how the piece simplifies at the scale of visible structure. The code commits to folded bands, spectral glow, and slow lateral drift. You can open the full artifact page or jump straight to the gallery sketch and watch the sky keep its shape while the light keeps moving.