3D / WebGL

3D Material Finish Switcher

by Vanguardia · motionprompts.dev

Full-viewport Three.js hero with a GLB pocket watch whose finish is swapped at runtime from a JSON of PBR presets: three MeshPhysicalMaterial recipes plus a real MeshTransmissionMaterial for the crystal, lit by nothing but a generated studio HDRI whose bright panel is aimed at the exact cone a flat case reflects. The dial stays towards the camera — the case sways instead of turning, and a drag eases back — so the highlight travels across the finish in every frame. A static poster is the LCP, the canvas is only built when the section enters the viewport, and a capability gate plus a runtime frame-time ladder decide whether the visitor gets transmission, plain physical, or the still.

Type: Web motion
Framework: Three.js
Trigger: pointer
Duration: 0.2–2.4s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: webgl-raf
Complexity: 4/5
Pinned: no
Reduced motion: handled
Libraries: three, GLTFLoader, MeshoptDecoder, HDRLoader, @pmndrs/vanilla

rAF angular integrator with pointer impulse; runtime PBR/transmission material swap

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev39,926 chars

# 3D Material Finish Switcher

## Goal

Build a full-viewport hero for a watch atelier. A single 3D object — a vintage pocket watch — hangs slightly right of ce…

The build prompt

More like this

Showreel with Blender 3D and self-made soundtrack

Interactive 3D Raptor 3 Rocket Engine WebGL Model

Leon’s 15-second motion design reel

1906 San Francisco Market Street in Blender

Mobile game reward animation template

Glass and gold mosaic that comes alive

Fresh recipes, every week.