# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Minimal, functional — doesn't compete with the 3D product |
| **Examples** | Inter, Geist, Söhne, Aktiv Grotesk, Satoshi |
| **Weight** | 400-600 (medium — not bold, the product is the hero) |
| **Tracking** | 0.02em-0.04em (standard) |
| **Size** | `clamp(2rem, 5vw, 4rem)` — large product name, small relative to the model |
| **Transform** | Sentence case for product name, UPPERCASE for labels |

**Why minimal sans:** The 3D product is the visual hero. The typography should be invisible — neutral, clean, functional. If the type has personality, it competes with the product. Inter and Geist are designed to be unseen.

---

## Body / Specs Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Monospace or clean sans — technical, precise |
| **Examples** | JetBrains Mono, Space Mono, Inter, Geist Mono |
| **Weight** | 400-500 |
| **Tracking** | 0.01em-0.02em (standard) |
| **Size** | `clamp(0.875rem, 1vw, 1rem)` — 14-16px for specs |
| **Line Height** | 1.5-1.6 |

**Why mono for specs:** Product specifications are technical data — dimensions, materials, weights. Monospace presents this data like a technical readout, which matches the precision of the 3D rendering. The mono type says "this is data, not marketing."

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Same family as body, wide tracking |
| **Examples** | Inter, Geist |
| **Weight** | 400-500 |
| **Tracking** | 0.15em-0.25em (very wide, technical) |
| **Size** | 10-12px |
| **Transform** | UPPERCASE |

**Usage:** Section labels, spec categories, navigation. These tiny labels feel like technical annotations — "MATERIALS", "DIMENSIONS", "FINISH", "WEIGHT".

---

## Type Scale

```
Display (product name):  clamp(2rem, 5vw, 4rem)  — large but smaller than the model
Body (specs):             clamp(0.875rem, 1vw, 1rem) — 14-16px, mono or sans
Micro (labels):           10-12px                    — technical annotations
```

The scale is compact — 10px to 64px. The contrast is between the large product name and the precise spec data, not between extreme type sizes. The product model is always larger than any text.

---

## Font Pairing Logic

**Sans display + mono specs:** Inter (product name) + JetBrains Mono (specifications). The sans carries the brand voice (clean, modern); the mono carries the technical data (precise, measured). This pairing mirrors the relationship between marketing and engineering.

**Alternative:** Single sans family throughout — Inter for everything. Simpler, but loses the technical readout quality of mono specs.

**Never:** Serif typefaces (wrong register — this is technical, not editorial), decorative fonts (competes with product), or multiple display fonts (the product is the only display element).

# Color Architecture

## Ground

```css
--color-ground-light: #F5F5F5;    /* Light gray — studio seamless paper */
--color-ground-mid: #E0E0E0;     /* Medium gray — gradient midpoint */
--color-ground-dark: #1A1A1A;    /* Dark — for dramatic product shots */
--color-ground-gradient: radial-gradient(
  ellipse at center,
  #F5F5F5 0%,
  #E0E0E0 70%,
  #C0C0C0 100%
);
```

**Why neutral gray:** The background is a studio seamless paper roll. Light gray (#F5F5F5) is the standard product photography background — it's neutral, doesn't compete with the product, and provides a clean surface for shadows. The gradient creates a subtle vignette that focuses attention on the center.

---

## Text

```css
--color-text-on-light: #1A1A1A;  /* Near-black on light gray */
--color-text-on-dark: #F5F5F5;   /* Light gray on dark */
--color-text-muted: #888888;     /* Medium gray for labels and specs */
--color-text-accent: #0066FF;    /* Electric blue for interactive elements */
```

**On light backgrounds:** Near-black text (#1A1A1A), not pure black. Pure black on light gray is too harsh — near-black has a slightly softer contrast that feels more like print.

---

## Accent

```css
--color-accent: #0066FF;         /* Electric blue — interactive highlight */
--color-accent-hover: #0052CC;   /* Darker blue on hover */
```

**Usage:** The accent appears on interactive elements — "ROTATE" buttons, "EXPLODE VIEW" toggles, scroll indicators. It should be used sparingly — the product provides all the color; the accent is for UI affordances only.

**Why electric blue:** It's the color of technical interfaces — CAD programs, 3D modeling software, engineering tools. The blue signals "this is a technical, interactive experience."

---

## Product Color

The product provides all color. The 3D model's materials and finishes are the color palette:

| Material | Color Treatment |
|----------|----------------|
| **Anodized aluminum** | Silver/gray with specular highlights |
| **Plastic** | Matte, solid color (product's actual color) |
| **Glass** | Transparent with refraction and environment reflections |
| **Fabric** | Diffuse, textured, product's actual color |
| **Leather** | Semi-gloss, warm tones, texture detail |

**The product's color is the design's color.** The background is neutral; the UI is minimal; the product is the only source of visual richness.

---

## Studio Lighting Color

```css
--light-key: #FFFFFF;       /* Key light — pure white, main illumination */
--light-fill: #F0F0F0;      /* Fill light — slightly warm, shadow detail */
--light-rim: #E8E8E8;       /* Rim light — edge definition */
--light-ambient: #404040;   /* Ambient — base illumination */
```

**Why white lighting:** Studio lighting is neutral white — not colored, not warm, not cool. The goal is to show the product's true colors, not to create a mood. Colored lighting would distort the product's materials.

---

## Color Don'ts

| Don't | Do Instead |
|------|------------|
| Colored backgrounds | Neutral gray (#F5F5F5 to #1A1A1A) |
| Multiple accent colors | One electric blue (#0066FF) for UI only |
| Colored studio lighting | Neutral white lighting — show true product colors |
| Busy environmental backgrounds | Studio seamless — gradient or solid neutral |
| Gradient overlays on product | Clean 3D rendering with proper lighting |
| Pure black text on light | Near-black #1A1A1A |
| Color that competes with product | Product provides all color; UI is neutral |

# Motion Principles

## Philosophy

Motion in 3D Product Showcase is **smooth and camera-driven**. The user controls the camera — scroll drives dolly, pan, and tilt movements. Orbital rotation lets the user inspect the product from any angle. Exploded views reveal internal components. All motion is smooth, weighted, and cinematic — like a professional product video where the user is the director.

---

## Scroll-Driven Camera

| Scroll Range | Camera Movement | Purpose |
|-------------|-----------------|---------|
| 0-25% | Dolly in (camera moves toward product) | Close-up of product details |
| 25-50% | Orbital pan (camera circles 90°) | Side profile view |
| 50-75% | Tilt up (camera moves from below to above) | Top-down view |
| 75-100% | Pull back (camera retreats to full product) | Full product in context |

```javascript
// Scroll-driven camera (React Three Fiber)
useFrame(() => {
  const scrollProgress = scroll.offset;
  camera.position.x = Math.sin(scrollProgress * Math.PI * 2) * 5;
  camera.position.z = Math.cos(scrollProgress * Math.PI * 2) * 5;
  camera.position.y = scrollProgress * 3;
  camera.lookAt(0, 0, 0);
});
```

**The scroll should feel like a camera movement**, not a page scroll. The product stays centered; the camera orbits, dollies, and tilts around it. The easing should be smooth — `cubic-bezier(0.22, 1, 0.36, 1)` — with no sudden jumps.

---

## Orbital Rotation (User Control)

| Property | Specification |
|----------|--------------|
| **Control** | Mouse drag or touch |
| **Rotation** | 360° horizontal, ±60° vertical |
| **Damping** | 0.1 (smooth follow, slight lag) |
| **Auto-rotate** | Optional, 0.5 RPM when idle |
| **Zoom** | Scroll wheel, clamp(2, 10) distance |

**The orbital control should feel weighted.** Damping at 0.1 creates a slight lag — the camera follows the mouse, not snaps to it. This creates a cinematic quality, like a camera on a motorized rig.

---

## Exploded View Animation

```javascript
// Exploded view (scroll-driven or toggle)
const explodeProgress = useScrollOffset(0.6, 0.8); // Triggered at 60-80% scroll
components.forEach((comp, i) => {
  comp.position.x = comp.originalPos.x + comp.explodeDir.x * explodeProgress * 2;
  comp.position.y = comp.originalPos.y + comp.explodeDir.y * explodeProgress * 2;
  comp.position.z = comp.originalPos.z + comp.explodeDir.z * explodeProgress * 2;
});
```

**Purpose:** Exploded views reveal the product's internal components — each part separates along its assembly axis. The animation should be smooth (1000ms+) and triggered by scroll position or a toggle button. The explosion should feel like a technical diagram coming to life.

---

## Material / Finish Transitions

| Trigger | Animation | Duration |
|---------|-----------|----------|
| Color swatch click | Material color crossfade | 600ms |
| Finish toggle (matte ↔ gloss) | Roughness/metalness lerp | 800ms |
| Environment change | Environment map crossfade | 1000ms |

```javascript
// Material transition (lerp)
useFrame(() => {
  material.color.lerp(targetColor, 0.1);
  material.roughness += (targetRoughness - material.roughness) * 0.1;
  material.metalness += (targetMetalness - material.metalness) * 0.1;
});
```

**Purpose:** When the user selects a different color or finish, the material properties smoothly transition — not an instant swap. The lerp creates a morphing effect that feels like the product is physically changing material.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| 3D canvas | Opacity 0→1 | 1500ms | `ease-out` | 0ms |
| Product model | Scale 0.9→1 + opacity 0→1 | 2000ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 500ms |
| Product name | Opacity 0→1 + translateY(16px)→0 | 800ms | `ease-out` | 1000ms |
| Spec panel | Opacity 0→1 + translateX(20px)→0 | 600ms | `ease-out` | 1200ms |
| Scroll indicator | Opacity 0→1 | 1000ms | `ease-out` | 2000ms |

**Key:** The 3D model entrance is SLOW (2000ms). The product should feel like it's materializing, not appearing. The scale-up from 0.9 to 1.0 creates a subtle "growing into place" effect.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Color swatches | Scale 1.0 → 1.1 (200ms) | Selected: ring border |
| Toggle buttons | Background fill (300ms) | Active: filled bg |
| Scroll indicator | Bounce animation (600ms) | — |
| Hotspots | Pulse animation (1000ms) | Click: camera move to detail |

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- Scroll-driven camera: disabled (static front view)
- Orbital damping: instant (no lag)
- Auto-rotate: disabled
- Exploded view: instant (fully exploded or collapsed)
- Material transitions: instant swap
- Entrance animations: instant opacity

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## What NOT to Animate

| Never | Why |
|-------|-----|
| Fast, snappy camera cuts | Breaks the cinematic quality — camera moves should be smooth |
| Bounce or spring on the model | The product is a physical object, not a toy |
| Auto-rotating without user control | The user should be the director |
| Particle effects | Too digital — this is a product showcase, not a game |
| Text typing animations | Too gimmicky for a technical product display |
| Screen shake or impact effects | Wrong register — this is precision, not action |

# Layout Grammar

## Grid System

**No visible grid.** The 3D product fills the viewport; UI elements float at the edges. Internally:

- 3D canvas: full viewport, `position: fixed`, `z-index: 0`
- UI overlay: `position: relative`, `z-index: 10`
- Product centered: the model sits at viewport center, always
- Specs: side panel (right) or below (scroll-triggered)

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-[100dvh]` |
| Background | 3D canvas with neutral studio ground |
| Product | Centered, full-viewport, photorealistic 3D model |
| UI | Minimal — product name (top-left), scroll indicator (bottom-center) |

```
┌─────────────────────────────────────────┐
│  PRODUCT NAME                  [SPECS]  │
│                                         │
│                                         │
│            [3D PRODUCT MODEL]           │
│            [Centered, full-viewport]     │
│            [Orbital rotation enabled]    │
│                                         │
│                                         │
│            [SCROLL TO EXPLORE]           │
│              ↓                          │
└─────────────────────────────────────────┘
```

**The product is the layout.** Everything else is minimal UI that floats at the edges. The 3D canvas is fixed; the UI scrolls over it.

---

## Scroll Sequence Layout

```
┌─────────────────────────────────────────┐
│  [3D canvas — fixed, full viewport]     │
│  [Product model — camera moves]         │
│                                         │
│  ┌─────────┐  ┌────────────────────┐    │
│  │ Section │  │  Spec panel       │    │
│  │ label   │  │  (slides in from  │    │
│  │         │  │   right on scroll) │    │
│  └─────────┘  └────────────────────┘    │
│                                         │
│  [Scroll drives camera: dolly, orbit,   │
│   tilt, exploded view]                   │
└─────────────────────────────────────────┘
```

The 3D canvas stays fixed. As the user scrolls, the camera moves around the product. Spec panels slide in from the right at specific scroll positions, providing details about the part of the product currently in view.

---

## Section Spacing

```css
--section-height: 100vh; /* Each scroll section is one viewport */
--spec-panel-width: clamp(280px, 30vw, 400px);
--spec-panel-margin: clamp(1.5rem, 4vw, 4rem);
--ui-edge-margin: clamp(1.5rem, 4vw, 4rem);
```

**Each scroll section is one viewport height.** The user scrolls through 4-6 viewports of scroll space, and the camera moves through a corresponding sequence of angles and views.

---

## Layout Patterns

### Pattern 1: Full-Viewport Product + Floating UI
```
┌─────────────────────────────────────────┐
│  [Product name]              [Specs]   │
│                                         │
│         [3D Product Model]              │
│                                         │
│  [Scroll indicator]                     │
└─────────────────────────────────────────┘
```

### Pattern 2: Product + Side Spec Panel
```
┌─────────────────────────────┬───────────┐
│                             │           │
│    [3D Product Model]       │  SPECS    │
│    (camera at angle)         │  Material │
│                             │  Weight   │
│                             │  Size     │
│                             │  [Color]  │
│                             │           │
└─────────────────────────────┴───────────┘
```

### Pattern 3: Exploded View + Component Labels
```
┌─────────────────────────────────────────┐
│  [Exploded 3D product]                 │
│  [Components separated]                 │
│                                         │
│  → Component A (label)                  │
│  → Component B (label)                  │
│  → Component C (label)                  │
└─────────────────────────────────────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full 3D canvas, side spec panel, orbital controls, scroll-driven camera |
| **Tablet (768px)** | Full 3D canvas, spec panel below (toggle), simplified camera sequence |
| **Mobile (375px)** | Full 3D canvas, specs as bottom sheet, touch orbital controls, reduced camera sequence |

**On mobile:** The 3D product should still fill the viewport. Touch controls replace mouse drag for orbital rotation. The spec panel becomes a bottom sheet that slides up when tapped. The scroll-driven camera sequence is simplified — fewer angles, shorter scroll depth.

---

## Layout Don'ts

| Don't | Do Instead |
|------|------------|
| Visible 3D controls (rotation widgets) | Invisible controls — mouse drag or touch |
| Information overlays on the 3D scene | Side panels or below-section specs |
| Busy backgrounds or environmental scenes | Neutral studio ground (gradient or solid) |
| Multiple products in view | One product, centered, full-viewport |
| Text over the 3D model | Text at the edges — product is the hero |
| Standard page layout (header, content, footer) | 3D canvas fixed, UI floats over it |
| Card grids for features | Scroll-driven camera reveals features |

# Texture & Material

## Primary Texture: Photorealistic PBR Material Language

The texture IS the material. Every surface should read as a physical substance under studio lighting — the product must look like it could be picked up, weighed, and photographed:

| Quality | Description |
|---------|-------------|
| **Metal** | Sharp, high-contrast reflections; crisp environmental highlights that slide as the camera orbits |
| **Glass** | Transmission, refraction, and caustics; the environment map distorts through the body |
| **Plastic** | Soft specular highlight, low-contrast reflection — matte sheen rather than mirror |
| **Rubber / matte** | Purely diffuse; no specular peak; light falls off softly across the surface |
| **Ceramic** | Glossy but not mirror-like — a single clean, slightly blurred highlight |

**The goal:** Materials are the story. A metal body reflects the studio; a matte surface absorbs it. Users should be able to read the material at a glance, the way they would from a product photograph.

---

## Studio Backdrop

```css
.studio-backdrop {
  background: linear-gradient(
    160deg,
    #F5F4F2 0%,
    #E4E2DE 55%,
    #D6D3CE 100%
  );
  background-size: 100% 100%;
}

.studio-backdrop--dark {
  background: radial-gradient(
    ellipse at 50% 35%,
    #2A2A2A 0%,
    #1A1A1A 65%,
    #111111 100%
  );
}
```

**Purpose:** The product lives in a virtual photo studio — a seamless gradient sweep from light gray to dark. Neutral backgrounds (light gray to dark) let the product's own colors carry the accent. The backdrop is never busy; it exists to catch reflections on the product's surfaces.

---

## Shadow Softness

```css
.soft-shadow {
  box-shadow:
    0 24px 60px -20px rgba(20, 20, 20, 0.35),
    0 8px 24px -8px rgba(20, 20, 20, 0.18);
}

.product-ground-plane {
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.10) 45%,
    transparent 75%
  );
  filter: blur(6px);
}
```

**Purpose:** Soft shadows ground the product in space. In the 3D scene, shadow softness comes from a large, soft key light with `shadow.radius` and `shadow.bias` tuned so contact shadows fall off gently. A blurred gradient plane under the product sells "it sits here" without harsh occlusion.

---

## Image Processing / Post-Processing

The render pipeline is part of the texture — the final image is graded like a photograph:

| Processing | Effect | Parameters |
|-----------|--------|------------|
| **Tone mapping** | Filmic response, rolled-off highlights | ACES Filmic curve |
| **Depth of field** | Subtle photographic focus | 0.1-0.3 blur radius, product in focus |
| **Vignette** | Soft edge falloff, showroom intimacy | Opacity 0.15-0.25 |
| **Grain** | Subtle filmic texture on glass/metal | Opacity 0.02-0.03 |
| **Exposure** | Controlled studio exposure, no blown highlights | 1.0-1.2 |

**The goal:** The rendered frame should look like a photograph taken in a studio — not a raw engine output. Tone mapping and depth of field are subtle (texture axis 5, but restraint keeps it premium).

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Neutral studio gradient (light gray to dark), never busy |
| Product | PBR materials with environment-map reflections |
| Ground | Soft blurred shadow plane under the product |
| Text overlays | Minimal — product name large, specs in mono, small details |
| UI elements | Translucent, floating panels; glass-like, low opacity |
| Dividers | None — scroll sequences change camera angle instead |

**The product is the hero; every other surface exists to serve it.** The backdrop catches light for reflections, the ground catches shadow, and the UI stays out of the way.

---

## Texture Don'ts

| Don't | Do Instead |
|------|------------|
| Default grey placeholder materials | Art-directed PBR materials with env-map reflections |
| Flat 2D product photos as primary | Live 3D model in a studio scene |
| Busy, patterned backgrounds | Neutral studio gradient that catches reflection |
| Harsh, unshadowed lighting | Soft key, subtle fill, controlled rim |
| Sharp contact shadows | Soft shadows with gradual falloff |
| Chrome-everything (mirror metal abuse) | Metal only where the product would use metal |
| Text-heavy overlays on the product | Minimal UI, translucent panels around it |

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `PBR materials` | Physically based rendering — the material language (metal, glass, plastic) that makes surfaces believable |
| `orbital rotation` | Camera orbiting the product — the core interaction, exploration via viewpoint |
| `studio lighting` | Soft key, subtle fill, controlled rim — lighting is the aesthetic |
| `exploded view` | Product parts separated in space — reveals construction and craft |
| `scroll-driven camera` | Scroll controls dolly/pan/tilt — the product is revealed through the journey |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `WebGL` | The rendering API powering real-time 3D in the browser |
| `viewport` | The camera's visible frame — full-viewport scenes for maximum product presence |
| `orbit controls` | Drag-to-rotate camera with inertia, damping, and zoom limits |
| `environment map` | Pre-baked reflections that give metal and glass their believable sheen |
| `depth of field` | Subtle photographic focus — product sharp, backdrop soft |
| `tone mapping` | Filmic response that grades raw render output into a photographic frame |
| `LOD` | Level of detail — reduced geometry at distance for performance |
| `camera dolly / pan / tilt` | Camera moves that choreograph scroll-driven sequences |

---

## Context Terms

| Term | Mood |
|------|------|
| `showroom` | Quiet, premium, everything serves the object |
| `object theater` | The product is the sole performer on a neutral stage |
| `product as sculpture` | The model is art-directed like a sculpture in a gallery |
| `photorealistic` | Indistinguishable from studio photography |
| `hero product` | The single object the page is built around |
| `photography shoot` | Lighting, angle, and backdrop chosen like a camera setup |
| `sculptural` | The product's form is the content |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `flat product photos` | Live 3D replaces photography — static 2D images are the fallback, never the primary |
| `2D imagery only` | The style is defined by real-time 3D rendering |
| `busy backgrounds` | The neutral studio backdrop exists to catch reflections, not attention |
| `text-heavy layouts` | Typography is minimal (axis 2) — large name, small specs |
| `default 3D asset look` | Grey-box materials and placeholder lighting are the generic signature to kill |
| `gimmicky rotation` | Rotation without purpose is a tech demo, not a showcase |
| `unlit scene` | Lighting IS the aesthetic — an unlit scene is unfinished |
| `product carousel` | Autoplay rotation replaces exploration with a slideshow |
| `broken canvas` | No WebGL fallback — the hero must render for every user |

---

## Prompt-Ready Phrases

```
"real-time 3D product model (Three.js/React Three Fiber) with orbital controls"
"studio lighting — soft key, subtle fill, controlled rim light"
"PBR materials with environment-map reflections (metal, glass, matte plastic)"
"scroll-driven camera — dolly, pan, tilt across scroll sequences"
"exploded-view animation revealing internal construction"
"neutral studio backdrop (light gray to dark) with soft shadow plane"
"subtle depth of field and filmic tone mapping (ACES)"
"minimal UI — large product name, specs in mono in side panels"
"product-centered full-viewport layout — product as sculpture"
"LOD and pixel-ratio caps for 60fps; static photorealistic fallback for low-end devices"
"drag to explore with inertia and damping; reduced-motion users get a static hero"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Consumer electronics** | A photoreal 3D model shows off every curve and material detail better than a photo |
| **Luxury goods** | The showroom/object-theater framing signals craftsmanship and exclusivity |
| **Automotive** | Car configurators and launch sites are the genre's origin — scroll-driven camera tours build desire |
| **Furniture & interiors** | Products must be "walked around"; orbit controls sell shape and material |
| **Footwear** | Sneaker launches use 3D drops — rotation shows silhouette, texture, and colorways |
| **Hardware / industrial startups** | A real-time model proves the product exists and is buildable |
| **DTC product pages** | Replaces flat packshots with an interactive reason to stay and explore |

## Brand Personality Match

This style reinforces brands that are:
- **Sculptural** — the product is a designed object, a piece of art, not a widget
- **Photorealistic** — engineering detail and true to the physical build
- **Interactive** — users don't look, they explore (orbit, zoom, rotate)
- **Premium** — showroom framing = the product is worth a room of its own
- **Tactile** — the PBR surfaces make you want to touch them
- **Restrained** — the interface stays quiet so the object speaks

---

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Content-heavy sites** | Docs, editorial, or blog-first pages need layout density — this style is product-first |
| **Service / SaaS marketing** | Nothing physical to showcase; 3D would be decorative, and the motion axis would read as show-off |
| **Data products / dashboards** | The minimal chrome and huge object hero don't fit data-density |
| **Brands without a physical-buildable product** | Talking product with no hero product rings hollow |
| **Budget / quick-turn projects** | A quality 3D stage + PBR + camera scripting is expensive to build and keep fast |
| **Mass-market catalogs** | Hundreds of SKUs — one sculptural hero doesn't scale to a grid of SKU tiles |

---

## How to Decide

Ask: **"Does my product deserve to be treated as sculpture — is there a physical object worth orbiting, and will the interface let users explore it?"**

If yes → 3D Product Showcase / Object Theater.
If no → Luxury Refined Restraint (if the product can whisper through whitespace and photography); Futuristic Fashion (if you want a white, minimal stage with a spotlight reveal instead of a full 3D scene); Dark Tech Terminal (if the product IS the tech — a dark mission-control frame around it).

---

## The 95% Confidence Trio

| Sibling Style | Choose it instead when… |
|---------------|--------------------------|
| **Futuristic Fashion** | The hero is a *person or garment in motion*, lives in pure white, and wants a spotlight/checkerboard framing — not a full 3D scene |
| **Dark Tech Terminal** | The product is a *system* (dashboard, terminal, OS) shown in a dark neon mission-control—not a physical object |
| **Luxury Refined Restraint** | The product sells on *whitespace, whisper-quiet photography, and heritage* — no real-time 3D interaction needed |

# Reference Gallery

## Live Sites

### Apple — Product Pages (apple.com/macbook-pro, /iphone)
- **What works:** The canonical product-as-sculpture. Product centered, full-viewport, scroll-driven camera moves that reveal edges and materials; whisper-quiet UI; accent colors taken straight from the hardware
- **URL:** apple.com

### Nike SNKRS — 3D Drops & Product Flips
- **What works:** 120-second 3D product flips, colorway exploration, exploded-view reveals for sole and construction — direct references for sneaker/footwear versions of this style
- **URL:** nike.com/snkrs (drop campaigns, product pages)

### Porsche — 3D Car Configurator (porsche.com/en/3d-configurator)
- **What works:** The automotive configurator template — orbit controls, studio lighting, material swatches (paint/finish/trim), scroll-driven exterior→interior reveal
- **URL:** porsche.com

### Dyson — Product Pages (dyson.com)
- **What works:** Consumer-hardware hero — product spins on a light studio stage, spec labels float beside exploded parts, minimal chrome, neutral backdrop
- **URL:** dyson.com

### BMW / Audi — Online Configurator
- **What works:** 360° exterior + interior walk, paint/material transitions over consistent studio lighting — reference for finish-swap interactivity
- **URL:** bmw.com / audi configurator

### holo3 / Spline Showcase (spline.design)
- **What works:** Real-time WebGL scenes shipped with orbital controls and environment reflections — a directory of what three.js alternatives can achieve at speed
- **URL:** spline.design

### Rog — Graphic Cards / ASUS Product Pages
- **What works:** 3D component heroes with exploded views — see how exposed parts (chamber/metal) get mono spec labels floating beside them
- **URL:** asus.com/rog

---

## Key Visual References

### Staging
- **Studio stage** — neutral light gray center, dark background only as a material stage
- **Contact shadow** — soft shadow plane directly under the object, so it "lands"
- **Vignette** — subtle falloff toward the edges; never a flat fill

### Lighting
- **Key** (45°, soft, warm) — the dominant shape-defining light
- **Fill** (hemisphere, 0.08) — lifts shadows without washing out
- **Rim** (tight spot behind) — separates the silhouette from the stage

### Materials
- **Brushed metal** — anisotropy, roughness ~0.3, faint scratches
- **Clearco lacquer** — clearcoat 1.0 + reflection blur
- **Matte rubber** — roughness 0.85, no specular bounce
- **Environment reflections** — HDR map, never flat/gray

### Motion
- **Orbital drift** — auto-rotating at 0.08 rad/s, paused while dragging
- **Scroll dolly** — camera moves with lerp, not snapping
- **Exploded view** — 16px offsets, staggered 60ms, 900ms
- **Material swap** — 500ms lerp of metalness/roughness/color

### Typography
- **Product name** — a huge light uppercase display (Inter 200), track width
- **Spec labels** — 11–12px mono (JetBrains Mono), tracking 0.08em
- **No long body** — captions capped at 340px, 14–16px

---

## Screenshot Notes

> When capturing references for this style, look for:
> - The object (must be a real-time 3D render, not a flat photo)
> - The stage (neutral, light-to-dark gradient, never busy)
> - The lighting (key + fill + rim, soft shadows, contact shadow)
> - The camera (orbit autopilot, scroll-driven dolly/pan/tilt, exploded view)
> - The typography (huge light product name; tiny mono spec labels; no walls of copy)
> - The accent color (taken from the product finish, not invented by the UI)
> - The overall mood (sculptural, photorealistic, interactive, premium — a showroom)

---

## Notes

- **Best references are product-live sites** allowing the interaction: Apple, Nike, Porsche/BMW/Audi configurators — study the *interaction*, not just the poster frame.
- **Distinguish from flat site-to-product pages:** in "3D Product Showcase" the 3D model is the canvas, always. A page that uses a video mutation or a static photo is a different style (Luxury Refined Restraint / Dark Cinematic Studio).