Aurora Curtain Field
The kit's aurora on its own, in WebGL: three curtains with bright borders, fraying rays and folds over a field of stars, bowing toward the pointer, for any dark section.
WebGL20 deps1 file · 26 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode, RefObject } from "react";
/**
* AuroraCurtainField — the kit's aurora as a background for any dark section.
*
* Three curtains (WebGL2) over a field of stars: altitude, brightness, the
* rose crown, speed and the palette are props. The curtains wander on slow
* loops, drift between their two core hues on a 60s clock and bow toward
* the pointer. A static dither keeps it free of banding. Content goes on top
* as children; without WebGL2 a quieter CSS haze stands in.
*
* Part of the Aurora kit: a near-black night (#050608) lit by curtains of
* aurora in mint #7cf5c4 and sky #38bdf8, a violet #a78bfa blend, a rose
* #f472b6 crown and an indigo #5b6cc4 fringe, all on one 60s clock; Bricolage
* Grotesque through var(--font-bricolage) for lit display type over Geist.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
A background that is actually an aurora. Three curtains hang in a night of stars, each with a bright lower border, rays that rise and fray, folds that brighten where the sheet turns edge-on and a faint indigo fringe beneath; each is lit only in stretches that wander, and the three are phase-offset so they never pulse together. The core drifts between its two hues on a 60s clock and a rose crown shows above the strongest curtains as far as you allow. Altitude, intensity, crown, speed and palette are props, and the curtains bow toward the pointer with a slow settle. A static dither keeps the gradients free of banding. It renders at half resolution and 30fps, only on screen, and content goes on top as children.
Curator’s note
The Aurora kit's surface (slot 2), cut from aurora-site: the same engine as the hero with the skyline off and every control exposed. Pro for the shader.
