Ardent Site
A whole launch-company site in safety orange, told by the scroll: an engine throttled up until it floods the page, figures rolled in edge to edge, the engine taken apart, a manifest, live pricing and a hold-to-book.
WebGL20 deps1 file · 143 KB TSXreduced-motion aware
Props
"use client";
import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, FormEvent, RefObject } from "react";
/** Safety orange as a field colour. Black on it reads at 6.3:1. */
const HV_ORANGE = "#FF5B14";
/** The hot highlight, for orange marks on black. */
const HV_HOT = "#FF7A1A";
const HV_BLACK = "#0B0A09";
const HV_BONE = "#EFEBE4";
/**
* The display face: Archivo's width axis does the shouting (wdth 62..125).
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this whole site
Hi-Vis is the library's action style: safety orange used as a surface, not a glow. This is the whole site for Ardent, a made-up engine maker. The first screen pins a rocket engine on a black stand; the scroll is its throttle, so it lights, climbs to full thrust and grows shock diamonds until its heat rises up the frame and the page turns orange, with the headline flipping from bone to black exactly where the orange reaches it. On that orange, four rated figures roll in like meters, each set edge to edge. The same engine then lies down in a white studio and comes apart into five assemblies with callouts, the manifest opens flight by flight, a mass slider prices three rides live and marks the cheapest, a press-and-hold books one, and the footer closes on the name in rising heat. One bar floats over everything and swaps its ink for whatever ground is under it.
Curator’s note
The Hi-Vis kit as one page; every other Hi-Vis entry is cut from it byte for byte. Pro: two hand-written WebGL2 scenes sharing one ray-marched engine (a black test stand with a volumetric plume, and a white studio where it comes apart), scroll-told sections driven by an eased chase written straight to the DOM, and no React render per frame. Every Hi-Vis entry is cut byte for byte from one site (Ardent, a made-up engine maker) and shares its fixed palette: safety orange #FF5B14 as a field, warm black, bone, Archivo's width axis for the shouting.
