Exploded Engine Scroll
A pinned section where the scroll takes a ray-marched rocket engine apart in a white studio, then reads each of its five assemblies with a callout and an orange rim light.
WebGL20 deps1 file · 38 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 section
An exploded view is the clearest way to show what something is made of, and it is usually a still. This one is the scroll. The section pins on a rocket engine lying in a bone-white studio with a soft shadow under it. As the reader scrolls, it turns to a three-quarter view and its five assemblies slide apart along their own lines: the thrust plate and gimbal, the injector, the copper chamber, the nozzle with its cooling tubes, and the safety-orange turbopump. Then each one is read in turn: a callout draws out of it with its name and one figure, and the part lights with an orange rim while the rest dims a little. At the end every callout stays up. On a phone the callouts become a list under the engine.
Curator’s note
Pro: the same hand-written engine SDF as the Ignition Hero, laid down and turned to a three-quarter view by composed rotations, each part sliding out along its own direction; the callouts are projected from the parts with the shader's own camera, and the active part is lit by an orange fresnel rim in the shader. The ground is the section's own bone, so the canvas has no edge. 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.
