Sand in the Wind Hero
A low, close shot of a dune's windward slope at golden hour, rendered live from sand physics: ripples that migrate with the wind, grains hopping under real drag and gravity, a plume off the brink. Steer the wind with a rose or by dragging the sky; scroll and the camera cranes up the slope until it clears the crest while the headline erodes into sand.
WebGL20 deps1 file · 148 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from "react";
/**
* SAND IN THE WIND HERO.
* A low, close shot of a dune's windward slope at golden hour, rendered live
* from sand physics: ripples that migrate with the wind, grains hopping under
* real drag and gravity, a plume off the brink. Steer the wind with a rose or
* by dragging the sky; scroll and the camera cranes up the slope until it
* clears the crest while the headline erodes into sand.
*
* 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:
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this heroe
The first screen is a dune, shot from a tripod 32 cm above its windward slope at golden hour: the brink is the horizon, the low sun to the right rakes across the ripples, and the sand sea runs away behind the brink. Everything that moves is simulated. Above 23 km/h (the 10 m wind) sand lifts; the wind comes in streaks of faster and slower air, so near the threshold only the streaks move sand. Grains hop under drag and gravity and rebound with a splash, a sheet of low saltation streaks (a few centimetres across and a couple of metres long, with a faint film between them) runs over the surface at grain speed, and fine dust lofts off the brink in a plume that is faint in a breeze and thick in a gale. The ripples grow out of flat sand while the page loads, and are read through a gentle warp so their crests bend, fork and fade out; they migrate on a 30 times time-lapse and re-form across a new wind when you turn it. Drag the wind rose to turn it or blow harder, or drag across the sky and the wind swings toward your stroke while a gust follows the pointer. A readout gives the wind, whether sand is moving, u* and the lift speed. Scroll and the camera cranes up the slope until the lens clears the crest and the sand sea shows beyond it; the headline erodes into sand over the first half of the run, the rose and readout fade, and in the last tenth the frame fades to the haze ground of the next section. Two lights: golden hour, and dusk, with the sun three degrees up, low on the left and a little behind you: red light skimming the slope and long shadows from every ripple and far dune.
Curator’s note
The Aeolian kit's hero, Pro. Hand-written WebGL2, no three.js and no assets. A sand simulation in SI units: a log-law wind, Bagnold's threshold (sand lifts at about 23 km/h at 10 m, u* 0.23 m/s), Kawamura saltation flux, and gusty streaks of faster air that make streamers; a Nishimori-Ouchi ripple model on the GPU (1,024 x 1,024 cells of 1.25 cm, ripples of about 11 cm, shaped into sharp crests that lean downwind over broad flat troughs and read through a slow warp so crests bend, fork and fade and the spacing varies by about a sixth, grown from flat sand in about 900 steps before the first frame, which migrate downwind and re-orient when the wind turns); a ray-marched dune (a 13 degree windward slope easing to 7 degrees under a sharp brink, a 33 degree slip face, four ridges beyond it out to 800 m) with the simulated ripples marched as real height, self-occluding and self-shadowed (and shadowing each other below a pixel, by Smith's function), lit by a Hillaire-style atmosphere (Rayleigh, desert-dust Mie, ozone); and 160,000 saltating grain packets on the GPU via transform feedback, under real drag (Cd = 24/Re + 6/(1 + sqrt(Re)) + 0.4) and gravity with a splash rebound. HDR with bloom and an AgX finish, and the exposure stops down two thirds of a stop as the camera rises. The shot is locked off on a tripod unless you scroll, and the ripples run on a declared time-lapse (30 times their real migration speed). The headline erodes into sand through the kit's dust layer. 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.
