# 3D Product Preview > The product spins on a lit studio turntable you can drag, zoom and switch angles on, with hotspots that explain each detail. - Nickname: Turntable studio - Also called: 3D product viewer, 360° product view, Product configurator - Category: Interaction‑led - Moods: Luxury, Techy, Calm, Trustworthy - Industries: E‑commerce, Luxury & Premium, Real Estate, Gaming, Creative & Portfolio - Style page: https://uilingo.dev/styles/3d-product-preview/ 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 ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "3D Product Preview" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line The product spins on a lit studio turntable you can drag, zoom and switch angles on, with hotspots that explain each detail. Design keywords: studio turntable, drag to rotate, angle switcher, pulsing hotspots, contact shadow, seamless grey sweep, colour swatches, view in AR. ## Visual language A neutral product studio wrapped around one object you can actually inspect. The hero is a seamless light-grey sweep with a soft key light from the top-left and a blurred contact shadow on the floor; on it a product (here a celadon mug) turns slowly on a CSS 3D turntable, reacts to drag and zoom, and carries pulsing orange hotspots with white callout pills. Everything around the stage — type, buttons, cards — is quiet greyscale with one deep celadon and an orange hotspot accent, so the object owns the light. It reads like a premium product-detail page, not a marketing poster. ## Signature details (must be visible) - Studio sweep background: radial-gradient(70% 60% at 30% 10%, #FFF, transparent) over linear-gradient(180deg, #F7F7F9, #E6E6EA 62%, #D9D9DF) inside a 28px-radius stage, 470–560px tall - CSS 3D turntable: perspective 1100px; object built from slats (rotateY(i×18deg) translateZ(94px)), a rim disc and a handle; rotateX(-14deg) tilt; one full turn every 14s, paused on interaction - Fixed key-light overlay with mix-blend-mode: soft-light (dark edges, bright stripe at 26%) so the highlight stays put while the object spins - Contact shadow: 300×64px blurred ellipse radial-gradient(closest-side, rgba(18,18,20,.38), transparent) under the object - Hotspots: 18px #FF6A3D dots with a 4px white ring and a pinging outline, each with a white pill label and soft shadow - Toolbar under the stage: pill segmented control Front · Side · Top · 360°, round zoom-in/out and fullscreen buttons, and a 'Drag to rotate' hint with a rotate-3d icon - Swatches: 34px glazed spheres; selected = 3px bg gap + 2px ink ring; choosing one re-colours the model ## Design tokens — use these exact values Colours (light mode): - background #ECECEF - surface #FFFFFF - surface-2 #F4F4F6 - text #121214 - text-muted #585864 - primary #121214 (text on it #FFFFFF) - secondary #2F6F62 (text on it #FFFFFF) - accent #FF6A3D - border #DCDCE2 - success #1F7A4F · warning #9A6200 · danger #C62D2D - chart series #121214, #2F6F62, #9CC7B8, #FF6A3D, #A9A9B3 Radius: sm 8px, md 12px, lg 20px, xl 28px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(18,18,20,0.06)`, md `0 18px 30px -18px rgba(18,18,20,0.25)`, lg `0 40px 60px -30px rgba(18,18,20,0.35)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 400ms cubic-bezier(.25,.8,.25,1) ## Typography (Latin + Thai) - Headings: Hanken Grotesk 600/700 with Thai fallback Noto Sans Thai 600/700 - Body: Hanken Grotesk 400/500/600 with Thai fallback Noto Sans Thai 400/500/600 - Mono: IBM Plex Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap - CSS stacks: heading `"Hanken Grotesk", "Noto Sans Thai", system-ui, sans-serif`; body `"Hanken Grotesk", "Noto Sans Thai", system-ui, sans-serif`; mono `"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Noto Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.4rem, 4.4vw, 3.8rem), heading weight 700, heading tracking -0.03em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Noto Sans Thai’s neutral, loopless shapes and even stroke match Hanken Grotesk’s clean product-catalogue tone without competing with the object on stage. ## Components - Primary button: ink #121214 pill, white text, soft drop shadow; paired with a white 'View in your room (AR)' pill - Segmented controls: white pill track, selected segment ink with white text - Cards: borderless white, 20px radius, layered soft studio shadow; hover lifts 4px with a longer shadow - Icon tiles: round studio-gradient buttons with a tiny drop shadow, like objects on a sweep - Price: 2.2rem bold, close to rating stars (orange) and maker line - Art panels and featured cards: studio sweep with a CSS-drawn glazed vessel and contact shadow instead of illustrations - Inputs: white, 12px radius, ink focus ring at 10% - Dashboard: top nav with ink pill active item, ink line + celadon second series, celadon funnel pills ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → showcase → features → testimonials. Feature section as grid. The landing page is a product page: a split hero with the 3D viewer (stage + toolbar + hint) on the left at ~55% width and the buy box on the right — eyebrow, product name, maker and rating, price, lead, glaze swatches, size segmented control, Add to cart and AR buttons, delivery note. Below: an 'other views' row of four small static stages (front, side, top, back), three feature cards, star-rated reviews and a quiet footer. Inner pages keep the neutral studio language: studio-sweep art, borderless shadowed cards and ink pills. ## Content Use realistic product copy (fictional brand) suited to: Product detail pages for objects people want to inspect. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Glossy, rendered UI chrome everywhere — that is 3D Hyperrealism; keep UI flat and neutral - Busy colourful backgrounds or gradients behind the object - Fast or constant spinning (more than one turn per ~12s) and spinning that ignores reduced motion - A grid of many product tiles as the hero — that is a bento/catalogue layout - Hiding price and Add to cart below the fold of the viewer - Heavy 3D without a static fallback image ## Stack notes One self-contained HTML file with a