Orbit Product Hero
A first screen with the product in it, raymarched live in WebGL2: drag the dial round, move across the hero to click its ring through detents, and switch its finish between titanium, ceramic and polymer.
WebGL20 deps1 file · 42 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* OrbitProductHero — a first screen with the real product in it, rendered live.
*
* The object (Knurl, a control dial) is raymarched in WebGL2 from smoothly
* blended primitives under a studio rig: a key, fill and rim, soft shadows,
* occlusion and a softbox reflection. Drag it round (with inertia); left
* alone it drifts on the page clock. Moving across the hero clicks its knurled
* ring through detents on a spring, the finish keys put it in titanium,
* ceramic or soft-touch polymer, and a mono readout reports finish, angle and
* detent. Draws only on screen; without WebGL2 a CSS dial stands in.
*
* Part of the Spatial 3D kit: a dark studio (#0a0a0d, panels #101114 and
* #16171b, ink #f2f1ee) with anodised copper #ff7a3d only as light, and
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this heroe
The first screen of a hardware launch with the product actually in it, not a photo on a tilt card. The object, a control dial, is raymarched live from smoothly blended primitives under a studio rig: a warm key, a cool fill, a rim from behind, soft shadows, ambient occlusion and a softbox reflection, so titanium reads as metal, ceramic as matte and warm, polymer as soft. Drag it round and it turns with inertia; let go and after a moment it drifts on the page clock. Move across the hero and its knurled ring clicks through detents on a spring, and a copper marker on its glass cap follows. The finish keys change its material in about 400ms, and a mono readout reports the finish, the angle and the detent. It draws only on screen, and without WebGL2 a CSS dial stands in.
Curator’s note
The Spatial 3D kit's hero (slot 1, Featured), cut from spatial-3d-site. Pro: a hand-written WebGL2 SDF raymarcher (soft shadows, occlusion, a studio reflection, three finishes) with orbit inertia, a page-clock drift, a detent ring on a spring and the kit's keycaps.
