AuroraCurtain

Options

sky #070b18

css colour

The night sky behind it. Dark, and not black: a real sky has a colour, and the shoulder that keeps the bright parts from clipping lifts pure black into a flat grey anyway.

low #45efa0

css colour

The colour at the foot, which is oxygen's green line at 557.7nm and the brightest thing in the display. Shifting it far from green stops reading as an aurora, because this is the one colour everybody has seen.

high #d8468f

css colour

The colour at the top, which is the slower red transition high up where the air is thin enough to let it happen. Magenta rather than pure red is what a camera records and what most people picture.

curtains 3

1 to 3

How many curtains. Each is further away: lower in the frame, dimmer, and folded on a different scale. One is a quiet backdrop, three is a display.

height 0.3

0.15 to 0.9

How far up the frame the light reaches, as a share of its height. It is a falloff rather than a limit, so a curtain has no top edge: it runs out.

fold 0.62

0 to 1.5

How hard the curtains fold along their length. At 0 you have flat bands, which is a real thing a quiet aurora does and is also the safest setting behind text.

rays 0.8

0 to 1.4

Contrast of the vertical rays. This is the most recognisable thing about an aurora and the first thing to raise if it looks like a gradient.

pitch 40

8 to 120

How fine the rays are, as turns across the frame rather than a count: x spans the aspect ratio, so 40 is roughly a dozen ribs on a wide canvas. Past about 90 they stop resolving on a small panel and read as noise.

brightness 0.8

0.1 to 2

Overall strength of the light. A soft shoulder keeps it from clipping, so a high value compresses rather than flaring into a white patch.

stars 0.5

0 to 1.5

Stars. They sit under the aurora rather than over it, and they are brighter overhead than near the horizon, because low stars are seen through more air.

horizon 0.45

0 to 1.5

Light on the horizon. Nowhere on Earth is the bottom of the sky as dark as the top, and the gradient is most of what stops a flat sky colour looking like a swatch.

grain 0.3

0 to 1

The sensor noise of a long exposure. Static rather than crawling: film grain that moves is a different effect and a far noisier one.

period 36

12 to 120 s

Seconds for one full cycle, and the pace control. Long on purpose: a backdrop has to survive being ignored, and an aurora that hurries is a screensaver.

What it needs

Category

Backdrops, an effect

Dependencies

None at all

Browser

WEBGL2

Frame budget

~0.6 ms · 1 context

Pinned to

v0.12.0

• Built for a dark ground and declared as one. On warm paper it is a worse aurora for no reason, and the house style is a house style rather than a rule about what may exist
• The shape follows the physics rather than a reference photograph. Emission runs along near-vertical magnetic field lines, which is the striation; the electrons stop at an abrupt floor around 100km and thin out upwards over hundreds of kilometres, which is why the bottom edge is sharp and the top has no edge at all
• The colour is altitude. Oxygen's green line at 557.7nm low down, its red line at 630nm higher up where collisions are rare enough to let the slower transition happen. Green at the foot running to red at the top, never a hue cycle
• Every moving term is a sum of sines whose time coefficients are whole numbers of turns over the period, so the loop closes exactly. A noise field advanced by time never returns to its first frame and the recorder needs it to
• Three curtains at different depths, each lower, dimmer and folded on a different scale. Sharing a scale makes them read as one curtain drawn three times
• The stars do not twinkle. Scintillation is strongest near the horizon and nearly absent overhead, and faking it evenly costs a per-frame change in every pixel for something nobody looks at
• One WebGL2 context, one full-screen triangle, no buffers and no attributes
• No texture reads and no noise lookups. The whole frame is around twenty sines and two hashes per pixel, which is cheap enough that the cost is the pixel count rather than the shader
• The curtain loop is bounded at three and breaks early, so one curtain costs a third of three