3D & Hyperrealism demo
3D & Hyperrealism

An immersive interface built with realistic 3D models, lifelike textures, complex shadows, and physics-based motion for premium product experiences.
Category: Fantasy & Sci-Fi
Era: 2020s Modern
Prompt: 15.3 KB · 2085 words
# System Prompt — Coding AI Deliverable: "3D & Hyperrealism" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build, on the first attempt, a complete, production-quality, single-page landing page in the **3D & Hyperrealism** style: immersive, realistic, tactile, and spatial — with WebGL depth, layered shadows, physics-style lighting, parallax, and skeuomorphic detail. All user-facing copy must be written in **English**.

---

## 1. STRICT RULES & ARCHITECTURE (MANDATORY)

### **1.1 CSS-First Architecture & Zero Inline CSS**
- Keep **all** styling in a dedicated `style.css`. **Explicitly forbid** the `style="..."` attribute anywhere in the HTML.
- Target every design property, layout rule, and state via class or ID selectors only.
- The style direction's raw CSS techniques (`transform: translate3d`, `perspective: 1000px`, multi-layer `box-shadow`, complex gradients, `filter: drop-shadow()`) must be implemented **in `style.css`**, never inline.
- HTML must remain semantic and style-agnostic: reskinning the site requires editing CSS only.
- Dynamic motion values (parallax offsets, card tilt) must be driven by JS updating **CSS custom properties** (e.g., `--px`, `--py`) consumed by CSS transforms — never by writing literal inline styles.

### **1.2 CSS Variables & Theme Tokens**
Store all visual tokens in `:root` and the `.dark` theme class:

**Core tokens (required names):**
- `--primary: #001F3F` (Deep Navy), `--secondary: #800020` (Burgundy), plus `--accent-forest: #228B22`, `--accent-gold: #FFD700`, `--accent-silver: #C0C0C0`.
- `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- `--radius-sm: 10px`, `--radius-md: 16px`, `--radius-lg: 26px`.
- `--shadow-sm`, `--shadow-md` (multi-layer, see Section 5), plus `--shadow-raised`, `--shadow-pressed`, `--shadow-inset-highlight`.
- `--spacing-gap: 1.5rem`, `--transition-fast: 180ms`, `--transition-normal: 350ms`, `--ease-standard: cubic-bezier(.4,0,.2,1)`, `--ease-spatial: cubic-bezier(.16,1,.3,1)`.
- `--z-canvas: 0`, `--z-header: 900`, `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000`.
- `--font-base`, `--font-display`, `--focus-ring-color`.

**Suggested mode values** (adjust lightness 20–40% within the same hue only to satisfy contrast):

| Token | Light ("Studio Daylight") | Dark ("Midnight Studio") |
|---|---|---|
| `--bg-primary` | `#ECF0F4` (silver-lit gray — never pure white) | `#00162B` (navy deepened ~25%) |
| `--bg-secondary` | `#FEFEFE` | `#022B47` (raised navy panel) |
| `--text-primary` | `#001F3F` | `#EEF3F9` |
| `--text-secondary` | `#3E4E61` | `#A3B6C9` |
| `--text-success` | `#1A6B1A` (darkened forest) | `#7DD87D` (lightened forest) |
| `--text-error` | `#800020` | `#FF8095` (lightened burgundy) |
| `--border-default` | `rgba(0,31,63,.15)` | `rgba(192,192,192,.18)` |
| `--focus-ring-color` | `rgba(0,31,63,.55)` | `rgba(255,215,0,.55)` |

**Contrast pairing (enforced in both modes):** every light background token pairs with a dark text token and vice versa. Gold `#FFD700` may be used as text/fill **only on dark surfaces** (navy/burgundy); on light backgrounds, substitute a gold-derived tone at least 20–40% darker (e.g., `#B8860B`). Where near-white is required, use `#FEFEFE`, never `#FFFFFF`.

### **1.3 Mandatory Dark Mode Support**
- Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`; switching modes must require zero HTML changes.
- **Persistence:** store the user's choice in `localStorage`; first visit falls back to `prefers-color-scheme`. Because inline scripts are forbidden, run theme initialization as the **very first statements** of `script.js`, and support the media query in CSS so no-JS users still receive a correct theme.
- Provide a **visible toggle** in the header: Google Material Symbols `light_mode` / `dark_mode`, with `aria-pressed` reflecting state and a dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode").

### **1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox (`display: flex` / Tailwind flex utilities).
- **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified in CSS comments (e.g., `.steps` may use `align-items: stretch` for equal-height step cards).
- Mobile-first: multi-column rows must collapse to a single column on small viewports. **No horizontal scrolling** at any width down to 320px.

### **1.5 Framework Default & Tailwind CSS Integration**
- Use **Tailwind CSS via the Play CDN** (`<script src="https://cdn.tailwindcss.com"></script>`) as an external reference for layout utilities.
- **Do not add an inline `tailwind.config` script.** All theme values, custom colors, and component looks live in `style.css` as CSS variables and reusable classes (`.btn`, `.card`, `.input-group`, etc.). Utilities map back to variables; component classes own all visual identity.

### **1.6 Typography & Icons (Google Fonts Mandatory)**
- **Text:** Google Fonts — `Sora` (headings, bound to `--font-display`) and `Inter` (body, bound to `--font-base`), loaded via `<link>` tags.
- **Icons:** Google Material Symbols (Rounded variant) via the official `<link>`. **Raw inline SVGs and local icon files are forbidden.**
- **Explicit exception clause:** Three.js/WebGL-rendered 3D geometry is required for the hero scene and is permitted; this does not relax the icon rule — every 2D UI icon must still be a Google Material Symbol.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### **2.1 Button Component (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--ghost`)**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Skeuomorphic depth: raised multi-layer `box-shadow` with a 1px inset top highlight (`--shadow-inset-highlight`); primary buttons use the metallic gold gradient fill with navy text.
- **Hover:** brightness/lift shift — shadow deepens, `translateY(-1px)`, `cursor: pointer`.
- **Focus:** distinct ring via `box-shadow: 0 0 0 3px var(--focus-ring-color)` for keyboard navigation.
- **Active/Pressed:** tactile press — `transform: scale(0.97)` and shadows collapse to `--shadow-pressed` (inset).
- **Loading:** `.is-loading` disables interaction, blocks double-clicks, and renders a CSS spinner (or rotating Material Symbol `progress`) **without changing button dimensions**.
- **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`.
- **Success/Error:** temporary `.is-success` / `.is-error` states driven by `--text-success` / `--text-error` with icon swap (`check_circle` / `error`) and `aria-live` announcement.

### **2.2 Card Component (`.card`)**
- **Default:** flex layout, `--bg-secondary` surface, subtle `--border-default`, layered `--shadow-md` elevation, `--radius-lg`.
- **Hover:** `transform: translateY(-2px)` plus deeper shadow shift; feature cards additionally receive a subtle 3D tilt (max 4°, `perspective: 1000px`, via `--px`/`--py` custom properties) — disabled on touch devices and reduced-motion users.
- **Focus-within:** border and shadow highlight when a child link/button (pricing CTAs) receives focus.
- **Loading (skeleton):** define `.card--skeleton` with a shimmer animation (no layout jumps).
- **Empty state:** define `.card--empty` — Google Icon, guidance text. (Skeleton/empty are reusable CSS patterns; they need not render on this page.)

### **2.3 Form & Input (`.input-group`)**
- **Structure:** flex container wrapping `<label>`, `<input>`, and a dedicated error feedback element (`role="status"`, `aria-live="polite"`).
- **States:** empty; focused (outline ring via `--focus-ring-color`); filled; **valid** (success border + `check` icon); **invalid** (`aria-invalid="true"`, `--border-error`, `--text-error` message, `error` icon); disabled; read-only.
- The Final CTA email capture validates on submit: button enters loading state, then success confirmation is announced via `aria-live`.

### **2.4 Modal / Overlay (`.overlay`) — Mobile Navigation**
- **States:** opening, open, closing — all animated with `--transition-normal` and `--ease-spatial`.
- **UX:** centered flex container (`align-items: center`), darkened backdrop, Material Symbol `close` button, keyboard focus trap, close via `Esc` or backdrop click, body scroll lock, `aria-expanded` on the hamburger trigger.

### **2.5 Accordion (`.faq-item`) — FAQ**
- Each item: `<button aria-expanded>` controlling a region (`aria-controls`), chevron Material Symbol rotating 180° on open.
- Animate open/close via `grid-template-rows: 0fr → 1fr` transition in CSS; no layout shift; fully keyboard operable; one item open at a time is allowed.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** fluid sizing, no overflow; test 320px → 1440px+.
- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; 3D spatial movements use 300–400ms with `--ease-spatial`. **Respect `prefers-reduced-motion`:** disable parallax, 3D auto-rotation, card tilt, and scroll reveals (content must be fully visible instantly); render a static hero frame.
- **Accessibility (a11y):** WCAG-AA contrast in both modes; never rely on color alone; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); single `h1` with logical heading order; skip link; visible focus everywhere; full keyboard operability; `aria-live` regions for form feedback, pricing updates, and dynamic states. The WebGL canvas is decorative: `aria-hidden="true"` with real DOM text layered above it.
- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive/Danger actions:** any `.btn--danger` must be visually distinct (burgundy-based) in both themes. (Not expected on this page, but define the class.)

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** `index.html`, `style.css`, `script.js` (single deferred entry point). External CDN references only (Tailwind CDN, Google Fonts/Material Symbols, pinned Three.js UMD build). **No inline `<script>` blocks, no inline styles, no TODOs or stubbed sections — the build must be complete and runnable on the first attempt.**
- **Naming Convention:** BEM (`block__element--modifier`) exclusively, never mixed with ad-hoc naming.
- **Copy:** invent one coherent fictional product (a real-time 3D visualization SaaS) and write all original, concrete marketing copy in **English** — headlines, feature descriptions, testimonials with realistic names/roles, pricing, FAQs, footer text. **No lorem ipsum.** Anchor links use real section targets; footer secondary links without destinations may use `#` with descriptive accessible labels.
- **Acceptance checklist:** zero `style=` attributes; both themes complete and persisted; all component states defined; keyboard-only walkthrough succeeds; no horizontal scroll; reduced-motion honored; WebGL failure degrades gracefully.

---

## 5. THEME DIRECTION — 3D & HYPERREALISM

- **Gradients (5–10 stops, stored as tokens):** `--gradient-gold` (metallic sheen: `#FFF3C4 → #FFD700 → #B8860B → #FFD700 → #8A6D00`), `--gradient-silver` (brushed metal), `--gradient-depth` (navy → forest-tinted navy → near-black navy with a burgundy glow stop) for section backdrops, and a rich multi-stop CTA panel gradient.
- **Lighting & shadows:** shadows are physics-flavored — 2–3 stacked layers (contact, key, ambient) using a shadow color 20–40% darker than the surface (`rgba(0,16,33,.28)` light / `rgba(0,0,0,.55)` dark). Use `filter: drop-shadow()` for icon/depth accents; inset top highlights on all raised surfaces for tactile skeuomorphism.
- **Depth:** `perspective: 1000px` on hero and card containers; `transform: translate3d()` for all motion; metallic gold gradient text (`background-clip: text`) on one key headline phrase with a solid `--accent-gold`-derived fallback color; silver gradient hairline borders.
- **Mood:** Light mode = silver-lit daylight studio; Dark mode = cinematic midnight studio with glowing gold and burgundy rim lighting. The hero backdrop is deep-navy in both modes.

---

## 6. 3D ENGINE & PARALLAX IMPLEMENTATION

- **Three.js hero scene (required):** pinned UMD build from a public CDN; a single WebGL canvas absolutely positioned behind hero content (`z-index: var(--z-canvas)`, `pointer-events: none`). Scene: 2–4 physically-shaded objects (e.g., gold metallic torus, glass icosahedron, brushed-silver sphere) with `MeshPhysicalMaterial` (clearcoat/metalness/roughness), a warm gold key light, burgundy rim light, navy ambient fill, slow auto-rotation, and subtle pointer-driven camera drift.
- **Performance:** cap `devicePixelRatio` at 2; debounced resize; pause the render loop when the hero is off-screen (IntersectionObserver) or the tab is hidden.
- **Fallbacks:** no WebGL → hide the canvas, keep the CSS gradient backdrop; reduced motion → render one static frame, no loop; hero content is plain DOM and fully readable in every scenario.
- **Parallax (3–5 layers):** hero canvas, glow/orb layers, floating glass chips, and content translate at different rates on scroll via rAF updating `--px` custom properties consumed by `translate3d` in CSS. Disabled under reduced motion.
- **Scroll reveals:** sections use a `.reveal` class toggled to `.is-visible` via IntersectionObserver; delays come from pre-defined classes (`.reveal--d1`…`.reveal--d4`), never inline styles.

---

## 7. PAGE STRUCTURE & SECTION-BY-SECTION BUILD SPEC

1. **Header (sticky):** brand wordmark, anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle (per 1.3), primary CTA, hamburger → overlay menu (per 2.4) on mobile. Apply `scroll-margin-top` to all anchored sections for offset.
2. **Hero:** full-viewport section with the Three.js canvas, parallax layers, gradient depth backdrop; eyebrow badge, `h1` with the gold metallic key phrase, supporting subcopy, primary CTA ("Start Building Free") + secondary ghost CTA (anchor to How It Works), and a Material Symbol scroll cue.
3. **Features:** 3 `.card`s in a responsive flex row → column; each with a skeuomorphic raised icon tile (Material Symbol), title, concrete copy, hover tilt/lift (per 2.2).
4. **How It Works:** 3 numbered steps with metallic gradient number badges, connecting line via pseudo-element, Material Symbol per step, title + copy; equal-height flex cards.
5. **Testimonials:** 3 quote cards; gradient-initial avatar circles (CSS only), star rating via Material Symbol `star` with `aria-label` ("Rated 5 out of 5"), name + role.
6. **Pricing:** 3 tiers (e.g., Starter free, Pro $29/mo, Studio $99/mo); middle tier featured — gold "Most Popular" badge, elevated scale and shadow. Monthly/Annual segmented toggle (`aria-pressed`, ~20% annual savings) updating prices with an `aria-live="polite"` announcement. Feature lists use `check` icons; each tier has a full-state `.btn`.
7. **FAQ:** 6 items per accordion spec (2.5), covering the product, WebGL requirements, pricing, support, performance, and refunds.
8. **Final CTA:** full-width panel with the 5+ stop `--gradient-depth` backdrop and layered glow; headline, supporting line, and the email capture `.input-group` (per 2.3) with loading → success flow.
9. **Footer:** brand + tagline; secondary link columns (Product / Company / Resources); social icons as Material Symbols with `aria-label`s; bottom bar with copyright and Privacy/Terms links.

Build the entire deliverable now — complete, coherent, and functional on the first attempt.