Barchan Site
A whole cinematic site in wind-blown sand: a live simulated dune with sand lifting off its crest, a statement built out of sand, forty years of dune migration, routes and prices that blow away and rebuild, and a footer shedding spindrift.
WebGL20 deps1 file · 252 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, FormEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from "react";
/**
* BARCHAN SITE.
* A whole cinematic site in wind-blown sand: a live simulated dune with sand
* lifting off its crest, a statement built out of sand, forty years of dune
* migration, routes and prices that blow away and rebuild, and a footer
* shedding spindrift.
*
* 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 whole site
Aeolian is the library's wind-blown-sand style: grains, plumes, ripples and dunes that move, and an interface that erodes into sand and is rebuilt from it. This is the whole site for Barchan, a made-up camp that follows a crescent dune across the sand sea. The first screen is a live dune at golden hour, simulated down to its ripples, with sand lifting off the crest in a wind you can steer; the scroll cranes the camera up the slope until it clears the crest while the headline erodes into sand, and the frame fades to the haze of the next section. A statement builds itself out of sand as it arrives and erodes as it leaves. Forty years pass in one pinned scroll above a field of barchans, the small ones overtaking the big one the camp lives beside, until its lamps come on at dusk. Open a route and the grid blows away while the route assembles out of sand. Slide the nights and the prices are rewritten in sand; choosing a stay fills the request form, which, once sent, blows away into its receipt. The name closes the page with spindrift streaming off its letters. One nav floats over it all, reading the ground under it, with a vane that turns with the wind.
Curator’s note
The Aeolian kit as one page; every other Aeolian entry is cut from it byte for byte. Pro: three WebGL2 engines (the dune renderer with its ripple model, sky and grain simulation, the aerial dune field, the dust layer that turns any element into sand), one page-wide wind they all read, scroll-told sections driven by an eased chase written straight to the DOM, and no React render per frame. 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.
