3D Product Preview

Stylegeneral

360 product view, rotatable, zoomable, touch-to-spin, AR preview, product configurator, interactive 3D model. Best for E-commerce, furniture, fashion, automotive, electronics, jewelry, product configurators.

360 product view rotatable zoomable touch-to-spin AR preview product configurator interactive 3D model

#E8E8E8

#FFFFFF

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: 3D Product Preview

Keywords: 360 product view, rotatable, zoomable, touch-to-spin, AR preview, product configurator, interactive 3D model
Primary colours: Product-dependent, neutral backgrounds: Soft Grey #E8E8E8, Pure White #FFFFFF
Secondary colours: Shadow gradients, reflection planes, environment lighting colors, accent highlights
Effects & animation: Drag-to-rotate, pinch-to-zoom, spin animation, AR placement, material switching, smooth orbit controls
Best for: E-commerce, furniture, fashion, automotive, electronics, jewelry, product configurators
Do not use for: Content-heavy sites, blogs, dashboards, low-bandwidth, accessibility-critical

## Prompt keywords
Design a 3D product preview interface. Use: 360° rotation, drag-to-spin, pinch-to-zoom, AR preview button, material/color switcher, hotspot annotations, orbit controls, product configurator, smooth rendering.

## CSS / technical
Three.js or model-viewer, OrbitControls, touch events for rotation, WebXR for AR, canvas with WebGL, loading placeholder, LOD for performance, environment lighting

## Implementation checklist
☐ 3D model loads fast, ☐ Rotation smooth, ☐ Zoom works (pinch/scroll), ☐ AR button functional, ☐ Colors switchable, ☐ Mobile touch works

## Design system variables
--canvas-bg: #F5F5F5, --hotspot-color: #3B82F6, --loading-spinner: primary, --rotation-speed: 0.5, --zoom-min: 0.5, --zoom-max: 2

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source