Skip to content

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

ProSpatial 3Dminimal
Preview

Props

Scroll inside

The source is part of Pro

$27/month or $179 once. See Pro

No runtime dependencies
"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.

Pairs well with

Pro
Featured
Pro
Pro