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.
WebGL20 deps1 file · 31 KB TSXreduced-motion aware
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
// ---------------------------------------------------------------
}Details
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.
