VariState FORM
Jewelry Configurator - 2026
A small object asks for a close look. FORM puts a botanical ring in a quiet white studio, where metal, gemstone, and finish choices can be judged on the piece itself. Macro cameras and an optional hand-tracked try-on give those decisions different points of view.
I built the configuration, materials, camera direction, and interactions around a supplied ring casting. The web derivative adds fitted gemstone previews and finished prong tips, while image and PDF exports carry the selected configuration beyond the viewer.
Role: Experience Design, Real-Time 3D Development, Materials and Camera Direction
Stack: TypeScript, Three.js, WebGPU, WebGL 2, TSL, VariState Engine, MediaPipe, Vite
A swatch should explain the whole piece.
Four precious-metal choices, four gemstones, and polished or satin finishing give the ring 32 configurations. A change moves across the object as a soft reveal, keeping the connection between the selected option and the surface easy to follow.
The gemstones use faceted geometry with internal reflection, dispersion, and absorption. They respond to the studio environment as the camera moves, instead of relying on a sparkle texture that only works from one angle.
Give the details their own camera.
Manual orbit and zoom make the ring yours to inspect. Leave it alone for a moment and five slow macro compositions move over the leaf surface, side stones, and center stone, with soft transitions between views.
Dragging or zooming takes over from the current view. The camera follows the floating ring, so a small stone stays in frame rather than drifting away as the object moves.
Keep the casting at the center of the experience.
The supplied botanical casting provides the band, leaves, and ornamental supports. Fitted center and accent stones complete the web presentation. The center stone changes between conservative round and oval preview shapes, with its four main prongs following the crown.
An optional camera mode places the current configuration on the ring finger using local hand tracking. It offers another way to judge the appearance of the piece; the placement is a visual try-on rather than a ring-size measurement.
Make the choice useful after the browser closes.
Selections are saved locally, and the configuration summary brings the chosen materials together with an illustrative EUR estimate. The same configuration feeds the live preview and the exported document.
A branded PNG saves the current camera view. The two-page PDF uses five authored product and detail views alongside the selected options and itemized estimate, giving a conversation something concrete to come back to.
A closer look at FORM.
A recording of the working configurator follows the metal, gemstone, and finish choices, with orbit and zoom for inspecting the ring. Press Play to load the film.