Aurora Shader Background

A full-screen fragment shader folds three ribbons of aurora colour through layered fbm noise above a dark horizon, lets the pointer bend the curtains with a lagged lens, adds grain and a vignette; a CSS gradient stands in without WebGL or with reduced motion.

Compare Add to Prompt Builder

Techniques: full-screen quad ShaderMaterial
value-noise fbm
three stacked ribbons
curtain folds
pointer lens lerp
film grain
vignette
Tags: #background #aurora #shader #noise #hero #ambient #northern lights #grain
Inspired by: The slow northern-lights backdrops behind the hero copy of travel and outdoor brands — curtains of colour that fold and breathe rather than scroll.
Added: 8 Oct 2026

Playground

Tune it live

Changes re-run the demo and rewrite the prompt so what you copy is exactly what you see.

Drift speeduSpeed — 0.5 meditative, 2 restless1×IntensityBrightness of all three ribbons1×Ribbon A · green#3fe3a4Ribbon B · blue#5a6cffRibbon C · lime#d4ff3aFilm grain

One PlaneGeometry(2, 2) whose vertex shader writes gl_Position = vec4(position, 1.0) — the quad is the screen. The fragment shader builds the sky from three ribbons: each is a Gaussian band whose centre line undulates along a shared, noise-folded x axis, multiplied by a high-frequency vertical “curtain” term so the band breaks into the hanging folds real aurorae have. A ground fade kills the light near the horizon and a ceiling fade stops it saturating the top of the frame. Stars are a cheap cell hash that hides behind bright ribbons.

Gotchas: keep the three ribbons on one warped x so they fold together — warp them independently and the result reads as three unrelated gradients. Pass the palette as raw sRGB Vector3s and write gl_FragColor directly (a ShaderMaterial skips Three’s colour management, so THREE.Color would come out too dark next to the CSS fallback). Accumulate uTime from a clamped clock delta so the sky does not jump after a pause.

Subscribers only