Sand Script Pricing
Three stays priced by a nights slider. Move it and every total blows away as sand; let go and the new totals settle out of sand blown in on the wind.
WebGL20 deps1 file · 52 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
import type { CSSProperties, ReactNode } from "react";
/**
* SAND SCRIPT PRICING.
* Three stays priced by a nights slider. Move it and every total blows away as
* sand; let go and the new totals settle out of sand blown in on the wind.
*
* 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.
*
* CLIENT. The file starts with "use client". onChoose is a function, so render
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
Pricing where the numbers are written in sand. A slider sets the nights from one to fourteen; the moment you move it, the three totals erode from their windward edge and blow off downwind, and when you let go the new totals settle out of sand blown in from upwind. The per-night rate and the long-stay discount sit beside each total. Every stay has a short promise and three things included, and its button, pressed, blows away and comes back saying the stay is chosen.
Curator’s note
Pro: the first move of the slider snapshots every total and scatters it through the dust layer; once the slider has rested for 240ms the new totals are gathered out of sand, while the old grains are still in the air. Long stays (7 nights or more) take 10% off. Each plan's button is the kit's Sand Dissolve Button and reports the chosen stay and nights to onChoose (the Barchan site uses it to fill the request form). 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.
