3D Product Preview
Also called: 3D product viewer, 360° product view, Product configurator
The product spins on a lit studio turntable you can drag, zoom and switch angles on, with hotspots that explain each detail.
Design keywords
Say these words to ask for this style.
3D Product Preview puts a real object, not a photo grid, at the centre of the page. A seamless grey studio sweep, a soft key light from the top-left and a contact shadow on the floor turn the hero into a photo stage; the product rotates slowly on a turntable and responds to drag, zoom and an angle switcher (Front · Side · Top · 360°). Pulsing hotspots open short callouts about materials and sizes, swatches re-colour the model, and an “View in your room (AR)” button sits next to Add to cart. Everything else stays neutral and quiet so the object owns the light.
Best for
- Product detail pages for objects people want to inspect
- Configurators: colours, materials, sizes
- Hardware, furniture, footwear and ceramics launches
- AR-ready catalogues and showrooms
Avoid for
- Services and software with nothing physical to show
- Catalogues with thousands of SKUs and no 3D assets
- Very slow connections without a static fallback image
✓ Do
- Light the stage like a photo studio: soft key light, gentle floor gradient, contact shadow
- Keep controls (angles, zoom, AR) in one toolbar under the stage
- Show a static poster frame first and load the model on interaction
✕ Don't
- Don’t auto-spin fast — one rotation every 12–20s at most
- Don’t surround the stage with colourful UI that steals the light
- Don’t hide price and Add to cart below the viewer
Not to be confused with
On mobile
Give the stage the top half of the screen, rotate by one-finger drag and zoom by pinch, with angle chips under it and a sticky Add-to-cart bar. Load a poster image first and the model on tap; pause the turntable when off-screen.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.