Aurora Rise Footer
A footer where the lights come out as the page ends: scroll raises the aurora from behind the city's roofline, widens it into violet and rose and lights more windows under a large lit wordmark.
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.
Props
"use client";
import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, RefObject } from "react";
/**
* AuroraRiseFooter — a footer where the lights come out as the page ends.
*
* As it scrolls into view the aurora (WebGL2) rises from behind the city's
* roofline, brightens and widens into violet and rose, and more windows
* light up, trailing the scroll by ~600ms. The brand stands over the
* skyline in large type lit from above by the sky's leading hue. Scroll
* drives it (any scroller, via a capture-phase listener); under reduced
* motion the sky rests risen.
*
* 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
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
A footer that ends the page on a lift instead of a fade. As it scrolls into view the aurora rises from behind the city's roofline: its curtains climb from the rooftops to the middle of the sky, brighten, widen from a cool narrow display into violet and a rose crown, and more of the city's windows come on, all trailing the scroll by about 600ms so it never jerks, and all of it replays when you scroll back. The brand stands over the skyline in large type lit from above by the sky's leading hue, and the link columns sit in the dark above. Scroll drives it through any scroller (a capture-phase listener), nothing loops, and under reduced motion the sky rests risen.
Curator’s note
The Aurora kit's footer (slot 9), cut from aurora-site. Pro rather than the usual Free footer, as with Liquid Chrome's mirror-pool-footer: it runs the kit's WebGL2 engine, and no Free entry ships that engine. A capture-phase scroll listener feeds per-frame targets, so the sky rises without a React render. It rises where the kits before it dim.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Mirror Pool Footer
sectionsA footer whose giant chrome wordmark stands on the waterline of a dark pool that mirrors it: a real wave simulation rings under the pointer and takes a drop every ten seconds, bending the reflection as it ripples.
Dusk Set Footer
sectionsA footer that sets like the sun: as it scrolls in, a grained halo sinks toward a hairline horizon, warming from gold through rose to ember, behind a giant italic serif wordmark.
Horizon Light Footer
sectionsA footer whose giant wordmark is lit from below by a horizon that is also a signal: a latency trace lit where the pointer is, with a request pulse that runs it every few seconds and lights the letters as it passes.