Social Virtual Reality Style demo
Social Virtual Reality Style

An immersive futuristic visual style for metaverse landing pages featuring glowing neon gradients, holographic 3D elements, and virtual social spaces.
Category: Fantasy & Sci-Fi
Era: 2020s Modern
Prompt: 15.9 KB · 2226 words
# CODING-AI SYSTEM PROMPT — "NEXA" Social Virtual Reality Landing Page (Fantasy & Sci-Fi)

**Your role:** Act as a Senior Frontend Engineer and Expert UI Designer. Code the complete landing page on the first attempt — final, production-ready output, no follow-up questions. All user-facing copy must be written in **English** (the source brief is in Portuguese; translate every concept, keyword, and label — no Portuguese may appear anywhere in the UI, class names, or file names).

---

## 0. PROJECT BRIEF & THEME

**Theme:** "Social Virtual Reality" — Immersive · Futuristic · Social.
**Keywords:** metaverse, virtual reality, augmented reality, social, immersive, futuristic, interactive, AI, community, expressive.
**Era:** 2026+ Interconnected Metaverse. **Category:** Fantasy & Sci-Fi.
**Product concept:** **NEXA** — a next-generation social metaverse platform where users forge expressive AI avatars, build holographic spaces, and connect across VR, AR, and the web. Lean into sci-fi vocabulary (portals, dimensions, explorers, portal keys) while keeping the copy credible product marketing.

**Palette → mandatory token mapping:**

| Token | Value | Role |
|---|---|---|
| `--primary` | `#0078F4` (Social Blue) | CTAs, links, focus rings, primary glow |
| `--secondary` | `#3A0CA3` (Dark Purple) | Gradient partner, section washes, elevated surfaces |
| `--accent-cyan` | `#00FFFF` | Portal rims, highlights, active states |
| `--accent-magenta` | `#FF00FF` | Error/alert accent, secondary glow |
| `--accent-green` | `#00FF00` | Success + "live presence" indicator |
| `--bg-primary` | `#000000` | Page canvas (top of gradient) |
| `--bg-secondary` | Deep purple derived from `#3A0CA3` (e.g., `#150533` / `rgba(58,12,163,0.35)`) | Cards, glass panels |
| `--text-primary` | `#FFFFFF` | Headings, key copy |
| `--text-secondary` | `#E0E0E0` | Body copy |
| `--text-success` | `#00FF00` | Success messages |
| `--text-error` | `#FF00FF` | Error messages |
| `--border-default` | `rgba(224,224,224,0.18)` | Card/panel borders |
| `--border-error` | `rgba(255,0,255,0.6)` | Invalid input borders |
| `--border-success` | `rgba(0,255,0,0.6)` | Valid input borders |

**Signature visual effects (all required):**
- **Ethereal gradients:** page canvas `background: linear-gradient(180deg, #000000, #3A0CA3)` with layered radial glows in blue/cyan/magenta.
- **Glassmorphism:** `backdrop-filter: blur(15px) saturate(1.8)` on the nav, cards, and portal frames.
- **Glowing typography:** hero H1 uses `color: #FFFFFF; text-shadow: 0 0 10px rgba(0,120,244,0.5)`.
- **Dimensional portals:** circular elements with `box-shadow: inset 0 0 20px rgba(0,0,0,0.7)`, conic-gradient rims, slow rotation, animated via `animation: metaverse-pulse 8s infinite alternate` (define `@keyframes metaverse-pulse` as a breathing scale/opacity/glow loop).
- **3D avatar visualization:** a CSS-only hero scene using `perspective: 1000px` and `transform-style: preserve-3d` — orbiting avatar orbs built from gradients and Material Symbols; no images, no 3D libraries.
- **Floating elements:** stat chips and orbs with staggered `translateY` oscillation keyframes.
- **Particle effects:** a twinkling particle field (CSS-only `aria-hidden` elements or a lightweight `<canvas>` driven from `script.js`).
- **VR transitions:** scroll-reveal (fade + rise + subtle perspective tilt) via IntersectionObserver; hover tilt on cards using `perspective: 1000px`.
- **Social micro-interactions:** pulsing live-presence dot, reaction buttons with pop animation and counters, hover glows everywhere.

**Required page sections (in order):** sticky glass nav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No Inline CSS:** the `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID Selectors Only:** every design property, layout rule, and state must be targeted via class or ID selectors inside `style.css`.
- **Minimal HTML Modifications:** markup stays semantic and styling-agnostic — retheming the site must require editing `style.css` only, never the markup. No `onclick` attributes; all behavior lives in `script.js` via `addEventListener`.

### 1.2 CSS Variables & Theme Tokens
- Store **all** tokens in `:root`: the color tokens from the table above, plus `--font-base`, `--font-display`, `--radius-sm` (8px), `--radius-md` (14px), `--radius-lg` (24px), `--shadow-sm`, `--shadow-md`, `--shadow-glow-primary` (e.g., `0 0 24px rgba(0,120,244,0.45)`), `--shadow-glow-cyan`, `--shadow-glow-magenta`, `--spacing-gap`, `--transition-fast` (150ms), `--transition-normal` (300ms), `--ease-standard` (e.g., `cubic-bezier(0.4, 0, 0.2, 1)`), `--z-header` (900), `--z-dropdown` (1000), `--z-modal` (2000), `--z-toast` (3000).
- **Contrast pairing:** every background token in this theme is dark, so every text token must be light — `#FFFFFF`/`#E0E0E0` on `#000000`/deep purple. Neon accents (`#00FFFF`, `#00FF00`, `#FF00FF`) are reserved for large text, icons, and decorative glows; body copy always uses `--text-primary` or `--text-secondary` to maintain WCAG AA.
- **Near-white surfaces:** `#FFFFFF` is reserved for text and glows; if a near-white surface is ever needed, use `#fefefe` — never `#ffffff` as a background.

### 1.3 Mandatory Dark Mode — Dark-Only Exception
- Dark mode is mandatory and fully defined: the complete dark palette lives directly in `:root` (black → dark-purple canvas, light text, neon accents).
- **Exception clause:** the source theme specification explicitly excludes a light mode (Light: ✗ No / Dark: ✓ Full, "with light and shadow elements"). Therefore this project ships **dark-only** — do not build light-mode tokens, do not add a theme toggle, and do not implement localStorage theme switching; the "light and shadow" language refers to luminous glow effects on the dark canvas, not a light color scheme.

### 1.4 Flexbox Layout & Mobile-First Alignment
- Build every layout structure with Flexbox (CSS Grid only for card grids).
- **Default alignment:** every flex container defaults to `align-items: center` unless an exception is justified in a CSS comment (allowed exceptions: long text columns inside cards and the `.input-group` stack use `flex-start` for readability).
- **Mobile-first:** all flex rows collapse to columns on small viewports; fluid `clamp()` typography; zero horizontal scrolling at any width.

### 1.5 Framework & CSS Organization
- Per the provided CSS technical spec, write **clean custom CSS** in `style.css`, organized with `@layer` (tokens → base → components → sections → utilities) or clearly commented sections. If you add Tailwind, use it only for layout utilities; component identity and all visual design must come from BEM classes mapped to the CSS variables (`.btn`, `.card`, `.input-group`). Never mix naming conventions.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text:** load **Inter** (400/500/600/700) as `--font-base` and **Orbitron** (500/700) as `--font-display` for headings, numerals, and the wordmark — both via Google Fonts `<link>`. Orbitron satisfies the "futuristic typography" requirement.
- **Icons:** Google Material Symbols (Rounded) via the Google Fonts icon link. **Inline SVGs and local icon files are forbidden.** All visuals (avatars, portals, particles) must be CSS-constructed; no external image assets.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Buttons — `.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Primary = social-blue gradient with `--shadow-glow-primary`; ghost = glass border.
- **Hover:** brightness shift + intensified glow, `cursor: pointer`.
- **Focus:** distinct visible ring built from `--primary` (outline + glow) for keyboard navigation.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading:** `.btn--loading` disables interaction (pointer-events + `disabled`), prevents double-clicks, and renders a CSS spinner or rotating Material Symbol without changing button dimensions; set `aria-busy="true"`.
- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
- **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error` (used by the Final CTA form).
- `.btn--danger` (magenta-based) must be visually distinct — define it even if unused.

### 2.2 Cards — `.card` + modifiers
- **Default:** flexbox layout, glass surface (`--bg-secondary` + `backdrop-filter: blur(15px) saturate(1.8)`), `--border-default` border, `--radius-lg`, `--shadow-md`.
- **Hover:** `transform: translateY(-2px)` + glow border + subtle 3D tilt.
- **Focus-within:** border highlights when a child link/button receives focus.
- **Loading (Skeleton):** define a shimmer animation and `.card--skeleton` styles in CSS.
- **Empty State:** define a fallback pattern (Material Symbol + guidance text) for any dynamic area.

### 2.3 Forms & Inputs — `.input-group`
- **States:** empty, focused (glow ring via `--primary`), filled, valid (`--border-success` + check icon), invalid (`--border-error`, error icon, message in `--text-error`), disabled, read-only.
- **Structure:** flex container wrapping a `<label>`, the input, and a dedicated error-feedback element with `aria-live="polite"`.

### 2.4 FAQ Accordion
- `<button>` triggers with `aria-expanded` + `aria-controls`; panels with `role="region"` + `aria-labelledby`; CSS-animated height; rotating chevron Material Symbol; fully keyboard operable; one-open-at-a-time behavior.

### 2.5 Modal (Trailer Dialog)
- **States:** opening, open, closing — all animated with CSS transitions.
- **UX:** centered flex container (`align-items: center`), blurred backdrop overlay, Material Symbol `close` button (44×44), `role="dialog"` + `aria-modal="true"` + `aria-labelledby`, keyboard focus trap, close on `Esc` and overlay click, focus restored to the trigger, body scroll locked while open.

---

## 3. SECTION-BY-SECTION SPECIFICATIONS

### 3.1 Sticky Glass Navigation
Brand wordmark (Orbitron), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), primary CTA "Enter Now", hamburger (Material Symbol `menu`/`close`) below 768px with `aria-expanded` slide-down panel that closes on link click and `Esc`. Include a "Skip to main content" skip link.

### 3.2 Hero (full viewport)
- **Left column:** live-presence badge (pulsing `--accent-green` dot + "2.4M explorers online now"), H1 in `--font-display` with the blue glow ("Step Into a Universe Built for Connection"), subheadline describing NEXA (AI avatars, holographic spaces, cross-reality presence), primary CTA "Enter the Metaverse" + ghost CTA "Watch the Trailer" (opens the modal), trust row: stacked CSS avatar orbs + "Trusted by 2M+ creators and communities" + 5 Material Symbol stars with visible "4.9/5" text.
- **Right column:** the dimensional portal centerpiece — concentric conic-gradient rings, `box-shadow: inset 0 0 20px rgba(0,0,0,0.7)`, `metaverse-pulse` animation, orbiting 3D avatar orbs (`perspective: 1000px; transform-style: preserve-3d`), particle field. The entire visual is `aria-hidden="true"`.
- Floating stat chips ("10k concurrent dimensions", "512 ms cross-reality sync") with float keyframes; scroll cue at the bottom.

### 3.3 Features — exactly 3 cards
Glass cards, each with a Material Symbol icon inside a glowing orb, title, description, and "Learn more" link with arrow icon:
1. **Holographic Spaces** (`view_in_ar`) — build immersive 3D rooms in minutes and invite anyone, on any device.
2. **Expressive AI Avatars** (`smart_toy`) — avatars that mirror your emotions in real time, powered by on-device AI.
3. **Cross-Reality Presence** (`hub`) — VR headsets, AR glasses, and desktop sharing one persistent world.

### 3.4 How It Works — exactly 3 steps
Numbered nodes (01/02/03) on a gradient connector line, each with icon, title, description, staggered scroll-reveal:
1. **Forge Your Avatar** (`face`) 2. **Enter a Dimension** (`travel_explore`) 3. **Connect & Co-Create** (`groups`).

### 3.5 Testimonials — 3 quote cards
Each: Material Symbol `format_quote`, an English quote, author row (CSS gradient avatar orb + name + role), 5-star rating, and a reaction button (Material Symbol `favorite`) that increments a visible counter with a pop animation, `aria-pressed` toggle, and `aria-live` announcement. Invent realistic names and roles (community builder, digital artist, event host).

### 3.6 Pricing — exactly 3 tiers
**Explorer** (Free), **Creator** ($19/mo — highlighted: gradient border, glow, "Most Popular" badge, slight scale), **Pioneer** ($49/mo). Each tier: name, price, tagline, feature list with `check_circle` icons, CTA (primary on Creator, ghost on the others). All pricing buttons implement hover/focus/active states.

### 3.7 FAQ — 6 accessible accordion items
Cover: headset requirements, how the AI avatar works, safety/moderation, no-code world building, supported devices, cancellation. Real English answers — no lorem ipsum.

### 3.8 Final CTA
Full-width portal band (radial gradient + portal ring + particles). H2 "Ready to Leave Flat Reality Behind?", subcopy, and an email capture `.input-group`: label, email input, submit button "Claim My Portal Key". Flow: validate on submit → invalid shows magenta border + error icon + `aria-live` message → valid enters `.btn--loading` (simulated ~1.2s) → success state (green check + "Portal key claimed — check your inbox.") announced via `aria-live`. Microcopy: "Join 120,000+ explorers on the waitlist."

### 3.9 Footer with secondary links
Brand block (wordmark, tagline, social icon links — Material Symbols with descriptive `aria-label`s), then four secondary link columns: **Product** (Features, Pricing, FAQ — real in-page anchors), **Company** (About, Careers, Blog), **Community** (Guidelines, Events, Creators), **Support** (Help Center, Contact, Status). Bottom bar: © 2026 NEXA Labs · Privacy · Terms. Non-existent pages may use `href="#"`, but every link keeps hover/focus styles.

---

## 4. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` type, `minmax()`/`auto-fit` grids, no horizontal overflow at any viewport.
- **Smooth animations:** every state change uses `transition: var(--transition-normal)`; all float/pulse/particle/tilt/spin animations are disabled under `@media (prefers-reduced-motion: reduce)` (keep simple opacity fades only).
- **Accessibility (a11y):** WCAG AA contrast on the dark canvas; never rely on color alone — errors, success, and online states pair icons with text; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, a single `h1`, logical heading order); correct ARIA on the nav, accordion, modal, and reaction buttons; logical DOM/focus order; full keyboard operability; `aria-live` regions for form feedback and counters; scroll-reveal must never hide content if JS fails (gate initial hidden styles behind a `.js` class added to `<html>`).
- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.
- **Destructive actions:** none expected, but `.btn--danger` must remain visually distinct if used.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **Files:** three separate files — `index.html`, `style.css`, `script.js`. The HTML references the CSS in `<head>` and a **single deferred** `<script src="script.js" defer>` — no inline scripts, no inline styles.
- **Naming:** BEM only (`hero__title`, `btn--primary`, `card--featured`, `faq__item`, `input-group__error`) — never mix conventions.
- **Copy:** all user-facing copy in real, themed English — lorem ipsum is forbidden anywhere.
- **Meta:** `<html lang="en">`, descriptive `<title>`, and meta description.
- **`script.js` must implement:** mobile nav toggle, FAQ accordion, trailer modal (focus trap + `Esc` + overlay close), email form validation with loading/success states, IntersectionObserver reveals, reaction counters, optional canvas particles — all ARIA-correct and reduced-motion aware.

Generate the complete, production-ready code for all three files now, on the first attempt.