Aurora Window Features
Feature cards as windows onto one sky: a single WebGL canvas draws the aurora only inside each card's window, so a curtain carries on from one window to the next.
WebGL20 deps1 file · 30 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, RefObject } from "react";
/**
* AuroraWindowFeatures — feature cards as windows onto one sky.
*
* One WebGL2 canvas behind the row draws the aurora only inside each card's
* window, so a curtain that starts in one window carries on in the next,
* all on the same clock; the rest stays night. Pointing into a window bows
* the curtains toward it. Every window shows the same slice of altitude, so
* windows stacked on a phone still catch the light.
*
* 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
// ---------------------------------------------------------------
}Details
About this section
A feature row where every card is a window onto the same sky. One WebGL2 canvas sits over the whole row and draws the aurora only inside the cards' windows (rounded rectangles measured from the layout and passed in as uniforms), so a curtain that starts in one window carries on in the next and all of them move on the same clock, while the rest of the section stays night and the cards' text stays on their own dark surfaces. Point into a window and the curtains bow toward it. Up and down, every window shows the same slice of altitude, so windows stacked on a phone still catch the light. Each window carries a time chip, and the cards below tell the step.
Curator’s note
The Aurora kit's feature section (slot 7), cut from aurora-site. Pro: the kit's engine in windows mode, with rounded-rect coverage computed in the shader from measured rects, and an altitude slice per window.
