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.
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 · The overnight finance agent
Your books close while you sleep.
Vesperal reconciles, chases and closes your books overnight, so every morning starts with the numbers done.
Last night
- 22:00Started1,284 new transactions
- 23:41Reconciled1,279 matched, 5 set aside
- 02:15Chased6 invoices, in your voice
- 05:12Closed SeptemberSummary in your inbox
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Aurora Site
templatesA complete launch site for an overnight AI finance agent in the Aurora register: a flowing aurora nav, a WebGL hero over a sleeping city, window features, pricing that lights the sky and a footer where the lights come out.
Liquid Lens Hero
heroesA slab of liquid glass you drag across a vivid scene: the headline bends under its rim, colours split at the edge, and it wobbles like gel. Two WebGL passes, no libraries.
Molten Chrome Hero
heroesA first screen whose title is molten chrome in WebGL: the lit room it reflects turns with the pointer, the metal swells toward it, fast moves and clicks send ripples through the letters, and it stands on a mirror floor.