Ignition Hero
A first screen where the scroll is the throttle: a ray-marched rocket engine lights, its plume grows Mach diamonds, the metal runs hot and the frame floods safety orange.
WebGL20 deps1 file · 48 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, 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 heroe
The first screen pins on a rocket engine standing cold on a black stand, rendered live: copper chamber, dark alloy bell, a safety-orange turbopump. Scrolling is the throttle. A little way in the throat flashes and the engine lights; the readout jumps from cold to the 40% minimum at ignition and climbs to full thrust while the plume lengthens, shock diamonds form in its core and the bell glows from dull red to yellow where it runs hottest. The plume lights the metal above it, and the engine turns slowly toward you and leans toward the pointer. In the last stretch the heat floods the frame: flat safety orange spreads out from the plume until the whole screen is the next section's ground, and the headline turns from bone to black on the way.
Curator’s note
The Hi-Vis kit's hero. Pro: a hand-written WebGL2 ray marcher for a whole engine (a nozzle bell ridged by 56 regen tubes, a copper chamber, a painted turbopump, manifold rings, gimbal struts) and a volumetric plume marched in the engine's own space, with Mach diamonds, a heat ramp on the metal and a flood to flat orange that hands off to the next section. No three.js, no assets. 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.
