AURORAL — Colophon & Build Notes

01 The concept

AURORAL is a single, quiet screen from Wave 4 — Second Person. The premise of the wave is that the page is inert until you drive it: your cursor is the only power source. Here that source is solar wind. A curtain of aurora hangs dark and faint until your hand crosses the sky; then it bends toward the cursor, brightens where you pass, and drapes in the direction you comb.

The audience is a scroll-stopping viewer in a design showcase. The page has one job: make you realise, in about two seconds, that you are what makes the lights move — and that when you stop, they forget you and settle back to a single faint arc.

02 Palette

Four colours, all argued from a real aurora over a polar night. The bright green and magenta are reserved for light — the curtain and the instrument marks — never for small text, which stays in the pale star ink so contrast holds over the moving sky.

Polar night

#06121E

The sky itself. A deep blue-black, not neutral black, so stars and colour read as cold.

Aurora green

#4EE0A0

Atomic oxygen at altitude — the dominant line of a real aurora, and the colour that flares toward your hand.

Magenta skirt

#C24E9E

Nitrogen at the curtain's lower hem. Used sparingly, low in the frame, as the drape indicator.

Star

#DCE8F2

A faintly blue white for stars, wordmark and body ink — high contrast on the night with no glare.

03 Type

Jost

A geometric sans set in wide letter-spaced caps for the wordmark, eyebrows and the aurometer. Its thin weight at giant sizes reads like the cold, clean air of a clear polar night — structure without warmth.

Display · 300 / 400 / 500 · tracking .04–.42em

Source Serif 4

The reading voice. An optical serif with a true italic, used for the second-person passages so the writing feels spoken to you rather than announced. Set at a generous measure over dark scrims.

Body · 300 / 400 + italic · opsz 8–60

04 Technique

The sky is a single full-screen fragment shader — one triangle, no images, no framebuffers. Avoiding a ping-pong simulation sidesteps the FBO/viewport trap that flat-lines stateful GL sims: all memory lives in a handful of JavaScript uniforms.

The signature. Each frame the pointer feeds three values into the shader. uEnergy is a charge that rises with the speed of your movement and bleeds away fast when you hold still — sweep quickly and the whole curtain flares; stop and it relaxes to a faint arc. uMouse bends the curtain: near your column, the aurora's lower edge is pulled toward the cursor's height, so the light visibly leans at your hand. uComb integrates your horizontal velocity and springs back to zero, shearing the vertical ray filaments so they drape in the direction you swept. A localized halo brightens the exact column you occupy, and a thin solar-wind ribbon braids around it. Every filament is fbm value-noise; a soft filmic rolloff keeps the greens from clipping to white.

The corner aurometer reads the same uniforms back as live numbers — sweep, charge and drape — so the cause and effect are never in doubt. If WebGL is unavailable the page swaps to a static CSS aurora and all copy stays legible. Reduced-motion renders one settled arc with the animation loop switched off, still redrawing a single frame when you move.

05 Iteration log

Pass 1 — Craft

Passage text scrolls through the brightest part of the aurora, which the fixed top/bottom scrims don't cover — added a soft dark radial scrim behind each text block so body copy always has a floor.
Copy correction: the magenta lower fringe is nitrogen, not oxygen. Rewrote the line for accuracy a knowledgeable reader would trust.
Tightened eyebrow tracking, wordmark rhythm and the aurometer label hierarchy.

Pass 2 — Depth

Strengthened the pointer bend (authority 0.25–1.0 → 0.40–1.0) so the curtain leans convincingly at the hand — the curtain's peak now tracks the cursor from 45% to 73% of screen height as you raise it.
Second-read detail: a rare meteor streaks the upper sky roughly once a minute, independent of your hand — a quiet reward on a return visit.
Micro-interaction: the ◈ mark glows in step with your live charge.

Pass 3 — Hardening

Fixed a 375px overflow — the blurred, negatively-inset passage scrim was escaping the viewport; clipped it at the passage box. scrollWidth back to 375.
Added a localized brightening halo at the cursor column so the flare genuinely concentrates where your hand is (measured green peak 98 vs 73 in a far column) and softened the filmic rolloff so it reads without clipping.
Chanel rule: removed a superfluous magenta tint bleeding into the green sheet.
Fixed the "move to wake the sky" cue that couldn't fade — a reveal !important was beating the moved rule. Confirmed reduced-motion draws a settled arc with no rAF loop and still answers the pointer.

06 Verification

Driven headless in Chrome (puppeteer, ANGLE/SwiftShader), the cursor was moved for real on every pass and the sky asserted to respond: charge rose from 0 to 0.25+ on a fast sweep; the cursor column read brighter green than a far one; the curtain's peak tracked cursor height; the drape accumulator swung negative then positive when combed left then right; and stillness decayed the charge back below the faint-arc floor. Zero console errors, no 375px overflow.