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.
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Vesperal · After hours
Light that works the night shift.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Lit Dot Matrix Field
backgroundsA WebGL dot matrix under one volumetric light cone that leans toward the pointer: dots inside the light rise in brightness and size and take on the accent.
Aurora Horizon Hero
heroesA first screen at night under real aurora in WebGL: curtains fold, ray and drift over a sleeping city and bow toward the pointer, and the headline sits on frosted glass tinted by the live sky.
Holo Foil Field
backgroundsA full-bleed sheet of crumpled holographic foil in WebGL: its thin-film colours follow Newton's series, each face flashes silver or falls dark as it turns, and tilting it with the pointer sweeps the colour across the sheet.