Aurora Curtain
Rays that arrive where a sampled sheet folds end-on, so no line of code decides where a ray belongs.
The scene in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
"use client";
import * as React from "react";
import * as THREE from "three";
/**
* Aurora Curtain — the rays are never drawn.
*About this effect
A hero backdrop for a dark screen — a night mode, a weather view, the top of a landing page. The vertical rays are the whole subject of an aurora and not one of them is drawn. A sheet of light hangs over the horizon and meanders along its own length; where it turns edge-on to the viewer, a long stretch of it collapses into one column and all that light arrives in the same few pixels. Parameterising the sheet along the horizon rather than up the frame is the entire effect, and it is the part that is easy to get backwards: a curtain whose offset varies with height can only wobble, never fold, and wobble is exactly why a painted aurora reads as a gradient. Each pixel samples the sheet at 32 points and sums what lands on its column, so the pile-up — and therefore the ray — falls out of the arithmetic rather than being placed. It paints every pixel, so unlike most of this library it cannot mix its neutrals from the host: it reads the inherited text colour to decide which way round the page is, then commits — light piled onto a dark sky, or ink laid onto a pale one.
Related effects
- Fog BankSlabs composited back to front, each dimming what is behind it, so the bank has an inside rather than a surface.
- Plasma BloomThree fields multiplied rather than added, so light appears only where all three agree and most of the frame stays dark.
- Silk SheenBrightness taken from thread direction rather than position, so the highlight moves because the cloth turned.