projects / aurora-borealis-shader

Aurora Borealis Shader Background

A surrogate model of the northern lights built from pure math — no textures, no video. Sine and cosine functions parametrize the aurora curtain's shape and motion; layered together they create a convincing illusion of the real thing, computed entirely on the GPU every frame.

This animation is the live background of the Tarraxo Norway experimental web page — a concept that blends Afro-Latin rhythm with Norwegian landscapes, where the aurora sets the mood for the entire experience.

1) Coordinates and frame setup

Every pixel is mapped to normalized coordinates $uv$ so the effect scales to any screen.

uv = \frac{\text{pixel}}{\text{resolution}} - 0.5

A time variable $t$ is updated every frame, and the shader uses it to move the sky and aurora smoothly.

2) Natural randomness (noise + FBM)

Aurora shapes should not look repetitive, so we use fractal Brownian motion (FBM): several layers of smooth noise at different scales.

\mathrm{fbm}(p)=\sum_{i=0}^{N-1} a_i\,\mathrm{noise}(2^i p),\quad a_{i+1}=\tfrac{1}{2}a_i

This creates the organic, cloud-like variation used for folds, haze, and curtain modulation.

3) Aurora curtain shape — the sin/cos skeleton

This is the heart of the surrogate model. A sine wave defines the ribbon's horizontal sweep across the sky; a cosine term modulates its vertical waver. Together they form the parametric skeleton of the curtain — everything else is decoration on top of these two functions.

y_c(x,t)=y_0 + A\sin(kx+\omega t) + \beta\,\mathrm{fbm}(x,t)

d = y - y_c(x,t)

I_{\mathrm{curtain}}=\mathrm{bottom}(d)\,e^{-\lambda d^2}

Two bands with different wavenumbers $k$ and phases are layered to create depth — a far curtain and a nearer one, each driven by the same sin/cos parametrization but offset in time and space.

4) Filaments, colors, and depth

Thin vertical filaments are added with high-frequency noise. The palette stays mostly green/cyan, with magenta appearing in stronger upper regions.

I_{\mathrm{filament}}=I_{\mathrm{curtain}}\cdot\mathrm{noise}(\alpha x,\gamma y-vt)

C=\mathrm{mix}(C_{\mathrm{teal}},C_{\mathrm{green}},w_1)

C=\mathrm{mix}(C,C_{\mathrm{magenta}},w_2)

Stars, haze, and a soft horizon silhouette are composited to anchor scale and keep a realistic night-sky feeling.

5) Why it runs fast enough for a full page

Single fullscreen draw pass.
Animation done on the GPU with shader math.
Device pixel ratio is capped for mobile safety.
Animation pauses when the tab is hidden.
Presets tune intensity without changing architecture.

Aurora Playground Open live aurora page Back to projects