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.

ProSpatial 3Dminimal

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Preview
Knurl · Control dial

One dial.Every slider.

A physical dial for the software you make things in. Map it to anything, feel every step, keep your eyes on the work.

Pre-orderSee it apart
Drag to turn it

Why a dial

Sliders ask for your eyes. A dial asks for your hand: sixty detents a turn you can count without looking, a weight that stays put, a ring your thumb finds in the dark.

Inside

Four parts, one feel.

Turn it, or take it apart. Every part is shown where it lives.

  • Glass cap: Toughened glass over a copper marker that shows the current detent.
  • Knurled ring: Sixty detents a turn, cut into a ring your thumb can find blind.
  • Encoder: A magnetic encoder that reads a tenth of a degree, with no wear.
  • Base: A weighted base, 280 g, that doesn't walk across the desk.
  • Status light: A copper arc that tells you which profile is live.

Profiles

It becomes the control you need.

Profile 0100/60MusicFilter, send, tempo: one turn each.Mapped toCutoffDetents60 / turnFeelSoft
Profile 0200/60ColourExposure and temperature without the mouse.Mapped toExposureDetents120 / turnFeelFine
Profile 0300/60LightScene levels you can ride live.Mapped toMasterDetents24 / turnFeelFirm
Titanium · Shown on the object

Finishes

One dial, three materials.

  • Everything in Ceramic
  • Titanium ring and base
  • Five-year warranty
Pre-order · $329Placeholder prices. Ships spring 2027.

Try it

Feel the detents.

Exposure
+0.7 EVDrag it round, or focus it and use the arrow keys.

Props

Scroll inside
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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

NewPro

The whole Modern Minimal kit as one launch page for a wake light, one day long: night into morning in a scroll-scrubbed hero, the day through the middle, dusk in the footer, every value bound to the scroll with no easing.

templatelanding pageproduct launch
Featured
NewPro

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.

herowebgl3d
Pro

A complete launch page from the Bento Box kit: keynote figures, product captures, proof, pricing and a footer set as tiles, broken once by a full-bleed race between two builds.

templatelanding pagelaunch page