Windswept Route Cards
A grid of route cards, each a still of the dunes rendered live by the hero's renderer in that route's light. Open one and the whole grid erodes into sand and blows away; the route's own page builds itself out of sand blown in from upwind.
WebGL20 deps1 file · 134 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
import type { CSSProperties, ReactNode } from "react";
/**
* WINDSWEPT ROUTE CARDS.
* A grid of route cards, each a still of the dunes rendered live by the hero's
* renderer in that route's light. Open one and the whole grid erodes into sand
* and blows away; the route's own page builds itself out of sand blown in from
* upwind.
*
* FONTS. Archivo with its width axis for display, Instrument Serif italic for
* the accent word, Geist Mono for labels. In Next: Archivo({ subsets:
* ["latin"], axes: ["wdth"], variable: "--font-ae" }), Instrument_Serif({
* subsets: ["latin"], weight: "400", style: "italic", variable:
* "--font-ae-serif" }) and Geist_Mono({ subsets: ["latin"], variable:
* "--font-ae-mono" }) on <html>. Without them it falls back to system fonts.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
Six routes across the sand sea, each card a still of the same dunes seen from a different height and heading in the route's own light: dawn, golden hour, noon, dusk, haze and night, the night one lit by a full moon, with stars. Open one and the whole grid turns to sand from its windward edge and blows away downwind; the route's page (its scene, the nights, the distance, the grade and a day-by-day plan) builds itself out of sand blown in from the other side. Focus lands on the route's name. Back to routes runs the same wind the other way and returns you to the card you opened. The dust follows the page's wind, so if the hero's rose has been turned, the routes blow that way too.
Curator’s note
Pro: the transition is the kit's dust layer. The grid is painted into a canvas by a small DOM rasterizer (fills, borders, radii, every character at its laid-out position, the cards' own art canvases), then drawn as a crisp slab that erodes along the wind and one WebGL2 grain per cell flown on a stateless path, so the same code plays it backwards to build the route page. Each card's art is a still rendered by the hero's dune renderer in one shared hidden WebGL2 context (512 x 512 ripple cells, grown for 900 steps), in one of six lights, from a viewpoint chosen for each light (a moment of the hero's crane and a turn of the head, varied by +-4 degrees from the card's seed); it is copied out once, cached, and the context is released 4 seconds after the last request. A deterministic 2D painting of a dune scene (asymmetric dunes, lit sunward slopes, crest rims, streaming wisps) is drawn first, as an instant placeholder and as the fallback without WebGL2. Every Aeolian entry is cut byte for byte from one site (Barchan, a made-up camp that moves with the dunes) and shares its light and its wind: sand, umber and haze with one ember accent, Archivo set wide and light, Instrument Serif italic for one word, and a single page-wide wind that every engine reads.