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.
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.
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.
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.
Finishes
One dial, three materials.
- Everything in Ceramic
- Titanium ring and base
- Five-year warranty
Try it
Feel the detents.
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
// ---------------------------------------------------------------
}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
Matched on shared tags and category — the entries most likely to be used alongside this one.
Modern Minimal Site
templatesThe 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.
Orbit Product Hero
heroesA 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.
Bento Launch Template
templatesA 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.