Exploded View Section
The product taken apart live in WebGL2: its parts separate on a spring and each carries a callout pinned to it by a leader line re-projected from the 3D scene every frame, so labels stay on their part as it turns.
WebGL20 deps1 file · 43 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* ExplodedViewSection — the object taken apart, live, its parts called out in place.
*
* The dial's cap, ring, encoder and base separate on a spring (WebGL2), and
* each carries a label and a leader line re-projected from the 3D scene
* every frame, so they stay on their part while it moves or while you turn
* it. Driven by a key, a prop, or the scroll (apart at the middle of the
* view). The callouts are also listed for screen readers.
*
* Part of the Spatial 3D kit: a dark studio (#0a0a0d, panels #101114 and
* #16171b, ink #f2f1ee) with anodised copper #ff7a3d only as light, and
* one object in three finishes (titanium, ceramic, soft-touch polymer) under
* one rig: key, fill and rim, soft shadows, occlusion and a softbox
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
A features section that shows the inside of the product instead of describing it. The dial is rendered live and comes apart along its axis on a spring: the glass cap, the knurled ring, the encoder inside and the weighted base. Each part carries a callout, and each label and its copper leader line are re-projected from the 3D scene every frame, so they stay pinned to their part while it separates, while it drifts and while you turn it by hand. It is driven by a key (Take it apart / Put it together), by a prop, or by the scroll, coming apart as the section reaches the middle of the view and closing again at either end. The labels fade in once the parts have room, and the callouts are listed for screen readers too.
Curator’s note
The Spatial 3D kit's feature section (slot 7), cut from spatial-3d-site. Pro: the WebGL2 raymarcher with an explode spring and callouts projected from the scene's camera each frame.
