Spatial 3D Site
The whole Spatial 3D kit as one hardware launch: a curved rail nav, the product live in the hero, a field of soft forms, the product taken apart, profile cards, pricing by material, a dial input and a pedestal footer.
WebGL20 deps1 file · 109 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* Spatial3DSite — the launch site for Knurl, a fictional physical control dial
* for creative software, set in the Spatial 3D register: one real object,
* raymarched live in WebGL2 from smooth-blended primitives under a studio
* rig (key, fill and rim, soft shadows, occlusion, a softbox reflection),
* that you can turn in your hand. Every part of the page is either that
* object or built from the same stock: CSS-3D keycaps, dials and rails.
*
* - A nav on a shallow curved rail: the active link stands forward.
* - A hero where the dial floats and orbits under your pointer and wears
* the finish you pick (titanium, ceramic, soft-touch polymer).
* - A field of soft forms that drift and part around the pointer, under a
* heading that only lines up from the right angle.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this page template
The whole kit as one launch page for Knurl, a fictional physical control dial for creative software. A nav on a curved rail whose active link follows the section in view; a hero with the product rendered live, which you can turn, click through detents and put in titanium, ceramic or polymer; a field of soft forms under a heading that only lines up from the right angle; the product taken apart by the scroll with its parts called out in place; profile cards that each hold a small CSS-3D dial; pricing by material, shown on the object on a mirror floor; a dial you can turn as an input; and a footer where the dial comes to rest. The finish you pick carries through the whole page. Every name, price and claim lives in one typed content object, marked as placeholder.
Curator’s note
The Spatial 3D kit site (slot 12): every asset in the kit composed around one typed content object, KNURL_DEMO, for a fictional control dial. The assets above are cut from this file, byte for byte.


