Aurora Horizon Hero
A 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.
WebGL20 deps1 file · 37 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from "react";
/**
* AuroraHorizonHero — a first screen at night under real aurora.
*
* Three curtains of aurora (WebGL2) fold, ray and drift over a sleeping
* city: a bright lower border, rays that rise and fray, folds that brighten
* where a sheet turns edge-on, a faint indigo fringe beneath and a rose
* crown above. The curtains bow toward the pointer with a ~700ms settle and
* catch the roofline, and a few windows stay lit. The headline sits on
* frosted glass whose tint follows the sky's leading hue with a slow lag; an
* optional log card tells the night's story. The calls to action are the
* kit's AuroraGlowButton.
*
* Renders at 30fps and only on screen; reduced motion draws one still sky.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this heroe
The first screen of a launch in the Aurora register, built around a real aurora rather than blurred blobs. Three curtains hang over a sleeping city: each has a bright lower border, rays that rise and fray, folds that brighten where the sheet turns edge-on and a faint indigo fringe beneath, and each is lit only in stretches that wander, so the sky is never one wall of light. The core drifts between mint and sky blue on the kit's 60s clock and a rose crown shows above the strongest curtain. Move the pointer and the nearest curtain bows toward it and its rays quicken; the roofline catches the light and a few windows stay lit. The headline sits on frosted glass whose tint follows the sky's leading hue with a lag of a couple of seconds, so it reads as ambient light, and an optional log card beside it tells the product's night. It renders at 30fps and only on screen.
Curator’s note
The Aurora kit's hero (slot 1, Featured), cut from aurora-site. Pro: a hand-written WebGL2 aurora with three phase-offset curtains, a procedural skyline with lit windows, a pointer bow, a frosted panel tinted from the sky's hue on the shared 60s clock, and the kit's glow buttons.
