Aura Premium WebGL & Iconify demo
Aura Premium WebGL & Iconify

A dark, immersive premium landing page style featuring WebGL-driven animations and refined interactions tailored for luxury brands, architecture studios, and creative agencies.
Category: Luxury & Editorial
Era: 2020s Modern
Prompt: 14.3 KB · 1953 words
# BUILD SPECIFICATION — "AURA PREMIUM" LANDING PAGE (WebGL & Iconify)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality "Aura Premium" landing page in a single attempt, generating the final code immediately. Follow every rule in this specification exactly. All user-facing copy must be written in **English**.

## 0. PROJECT BRIEF

* **Product & Tone:** "Aura" is a premium SaaS product presented with a luxury, editorial-grade voice (category: Luxury & Editorial). Write real, confident, premium English marketing copy — no lorem ipsum.
* **Theme:** "Aura Premium WebGL & Iconify" — Premium, Animated, Interactive, Cinematic. Era: 2025–2026 Premium Interactive. Deep-black luxury UI.
* **Color Mode:** Dark-only (Light: No / Dark: Full).
* **Sections (in order):** Sticky Header/Nav → Hero → Logo Marquee (social proof) → 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**
* All styling lives in `style.css`. Explicitly forbidden: `style="..."` attributes, inline `<style>` blocks, and raw inline SVG code.
* Target all design properties, layout rules, and states via class/ID selectors only.
* HTML must remain semantic and styling-agnostic: changing the site's look must require editing only `style.css`, never the markup.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root` (single dark theme):
* **Colors:** `--primary: #3B82F6` (Electric Blue); `--secondary: #8B5CF6` (Neon Violet); `--bg-primary: #0A0A0A` (Deep Black); `--bg-secondary: #1A1A2E` (Dark Slate); `--text-primary: #FFFFFF` (Pure White); `--text-secondary: rgba(255,255,255,0.64)`; accents `--accent-amber: #F59E0B` (Warm Amber), `--text-success: #10B981` (Emerald), `--accent-rose: #EC4899` (Vibrant Rose); functional `--text-error / --border-error: #EF4444` (functional tokens may extend the decorative palette); `--border-default: rgba(255,255,255,0.08)`; `--border-success: #10B981`.
* **Contrast pairing:** every dark background token pairs with light text tokens; verify ≥ 4.5:1 for body text in the dark theme.
* **Shape, elevation, motion, stacking:** `--radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm / --shadow-md` (dark-theme glows); `--spacing-gap: 1.5rem; --transition-fast: 150ms; --transition-normal: 300ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --z-dropdown: 100; --z-modal: 200; --z-toast: 300; --z-canvas: -1`.
* **Mandatory CSS foundations** (implement robustly, with `-webkit-mask-image` fallbacks and `@property --angle` for the conic beam):
  * `body { background: #0A0A0A; color: #FFFFFF; font-family: 'Inter', system-ui, sans-serif; }` and `iconify-icon { font-size: 24px; }` as the base.
  * `.border-beam` — 1px transparent border, `background-clip: padding-box`, `::after` with `conic-gradient(from var(--angle), transparent 70%, #3B82F6, #8B5CF6, transparent 100%)`, `inset: -1px`, `border-radius: inherit`, `z-index: -1`, rotating 3s linear infinite.
  * `.sonar` — `@keyframes sonar-pulse { 0% { transform: scale(1); opacity: 0.8 } 100% { transform: scale(2.5); opacity: 0 } }`, 2s ease-out infinite.
  * `.flashlight-card` — `background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(59,130,246,0.15), transparent 50%)`.
  * `.marquee` — `marquee-scroll` 30s linear infinite; `mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent)`.
  * `.vertical-text` — `writing-mode: vertical-rl` with a clip slide-down reveal, letter by letter, staggered.
  * `.section-number` — `font-size: 5rem; font-weight: 800; opacity: 0.08; position: absolute; top: 0; left: 2rem`.
  * `canvas { position: fixed; top: 0; left: 0; z-index: -1; }`.

**1.3 Mandatory Dark Mode Support**
* Dark mode is the defined, default theme — all tokens above constitute the dark palette, defined once in `:root`.
* **Exception:** This theme is explicitly dark-only; therefore the light-mode palette, the visible theme toggle, and `localStorage` persistence are waived for this build — token-driven theming and all dark-mode contrast/accessibility quality bars remain fully in force.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox; every flex container **must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment.
* Mobile-first and responsive out of the box: rows convert to columns on small viewports; zero horizontal scrolling anywhere (marquee, vertical text, and canvas must be overflow-safe).

**1.5 Framework Default**
* Use Tailwind CSS as the default engine, consumed exclusively through `@layer` / `@apply` compiled into `style.css`, so the HTML carries only semantic class names that map back to CSS variables and reusable component classes (`.btn`, `.card`, `.input-group`). If the pipeline makes this impractical, fall back to clean, hand-written, token-driven CSS — never mix utility-class and BEM conventions in the markup.

**1.6 Typography & Icons**
* **Text:** Google Fonts — Inter (weights 400–800), loaded via `<link>`, bound to `--font-base`. Headings use tracking-tighter (`letter-spacing: -0.05em`) at weight 700–800.
* **Icons — Exception to the Google Material Symbols default:** per the explicit theme spec, all icons are delivered via the Iconify web component `<iconify-icon>` (CDN script): **Solar Duotone Bold** for UI icons, **Solar Linear** for the logo mark, **Simple Icons** for company logos. Raw inline SVG code and local icon files remain strictly forbidden.

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons (pill-shaped, `.btn` family)**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-pill);` minimum touch target 44×44px. Variants: `.btn--primary` (gradient `#3B82F6 → #8B5CF6`, white text) and `.btn--ghost` (transparent, 1px `--border-default`).
* **Hover:** the 1px border-beam conic animation (blue→violet, 3s rotation) activates around the pill, plus a brightness/shadow shift and `cursor: pointer`.
* **Focus-visible:** distinct ring via `outline`/`box-shadow` using `--primary`; fully keyboard navigable.
* **Active:** `transform: scale(0.97)` click feedback.
* **Loading:** disables interactions, prevents double-clicks/submissions, and renders a CSS-only spinner (border animation) or rotating `iconify-icon` without changing button dimensions.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error` (e.g., form submission).
* **Danger:** define `.btn--danger` (rose/red) visually distinct in the dark theme, even if unused.

**2.2 Cards (`.card` family — Features, Pricing, Testimonials)**
* **Default:** flexible Flexbox layout, `--bg-secondary` surface, 1px `--border-default`, `--radius-lg`, `--shadow-sm`.
* **Hover:** `translateY(-2px)` + shadow lift + the subtle **flashlight effect on both background and border**: JS updates `--mouse-x` / `--mouse-y` per card (rAF-throttled `mousemove`); background uses `.flashlight-card`; the border follows the cursor via a gradient-border technique.
* **Focus-within:** card border highlights when a child link/button receives focus.
* **Loading:** skeleton shimmer keyframes defined in CSS with no layout shift.
* **Empty state:** structured fallback pattern with a Solar Duotone Bold icon + guidance text (define the classes even if unused).

**2.3 Form & Input (Final CTA email capture)**
* **Structure:** flex `.input-group` wrapping a `<label>`, the `<input>`, and a dedicated error feedback container.
* **States:** empty, focused (outline ring via `--primary`), filled, valid (`--border-success` + check icon), invalid (`--border-error`, red text, error icon, message), disabled, read-only.
* Validate on submit; announce errors via `aria-live="polite"`; show a success state on the button using `--text-success`.

**2.4 Modal / Popup (guardrail)**
* No modal is required by this spec — the FAQ uses an accordion. If you introduce any overlay, it must have: centered flex container, backdrop, `iconify-icon` close button, keyboard focus trap, Esc/overlay-click close, and CSS-animated open/close states.

**2.5 Theme-Specific Components**
* **Logo/lettermark:** Solar Linear icon + "Aura" wordmark, tracking-tighter, weight 800.
* **Logo marquee:** 11 company logos via Simple Icons (`simple-icons:nasa, spacex, uber, visa, grab, bose, discover, dji, nikon, craftsman, sony`) at **64×64**, white at reduced opacity (full opacity on hover), infinite 30s loop with the alpha mask per `.marquee`; duplicated track marked `aria-hidden="true"`; container labeled for assistive technology.
* **Sonar decorations:** pulsing rings on the hero badge, pricing badge, and decorative orbs; `aria-hidden`.
* **Vertical text:** decorative `vertical-rl` labels on section edges, revealed letter by letter via clip slide-down with staggered delays; `aria-hidden`.
* **Section numbers:** `01 / 02 / 03` per `.section-number` on Features, How It Works, and Testimonials; `aria-hidden`.
* **Vertical container lines:** 1px gradient (white→transparent) lines spanning container height as decorative dividers; `aria-hidden`.
* **WebGL image columns:** the hero visual and all primary imagery (including testimonial headshots) reveal via **4 vertical column slices sliding down** with staggered scroll speeds and **motion blur trails**; the columns **snap to perfect alignment when scroll stops**. Implement with WebGL — a fixed background canvas (`z-index: -1`) for the ambient scene plus column-sliced reveals for in-flow images — with a CSS clip-path/transform fallback when WebGL is unavailable. Canvas is `aria-hidden`.

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid type via `clamp()`, no horizontal overflow at any breakpoint.
* **Smooth animations:** CSS transitions on all state changes (`var(--transition-normal)`, `var(--ease-standard)`).
* **Staggered scroll with motion blur:** IntersectionObserver triggers staggered entrance reveals; blur trails tied to scroll velocity, clearing at rest — subtle, never disorienting.
* **`prefers-reduced-motion`:** disable the marquee, sonar, beam rotation, blur, stagger, and WebGL motion; all content must remain fully accessible in static form.
* **Accessibility:** semantic HTML5 (`header/nav/main/section/article/footer`), skip link, logical DOM/focus order, full keyboard operability (accordion via Enter/Space with `aria-expanded`; mobile menu closes on Esc), visible focus rings, `aria-live` for form feedback, descriptive `alt` text on headshots, decorative elements `aria-hidden`, never rely on color alone to communicate state, and contrast ≥ 4.5:1 body / ≥ 3:1 large text in the dark theme.
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Performance:** rAF-throttle mousemove, passive scroll listeners, no layout thrash.

## 4. SECTION-BY-SECTION BUILD REQUIREMENTS

**4.1 Header (sticky):** lettermark logo; nav links (Features, How It Works, Testimonials, Pricing, FAQ); pill CTA "Get Started" with border-beam hover; backdrop-blur and border-bottom appearing after scroll; mobile hamburger opening an animated slide-down panel (`aria-expanded`, Esc close, focus managed).

**4.2 Hero:** full viewport over the fixed WebGL canvas. Sonar-dot eyebrow badge; H1 tracking-tighter with a gradient text span (blue→violet); supporting subcopy; two CTAs (primary gradient pill + ghost pill); hero visual revealed via the 4-column WebGL clip slide-down; vertical-text decorative label; scroll indicator with sonar pulse; staggered entrance animations.

**4.3 Logo Marquee:** "Trusted by" heading plus the infinite marquee of the 11 Simple Icons logos per 2.5.

**4.4 Features (01):** `.section-number` "01", vertical line, heading + subcopy; 3 interactive cards, each with a Solar Duotone Bold icon, title, and description; flashlight hover; staggered scroll reveal with motion blur.

**4.5 How It Works (02):** `.section-number` "02"; 3 steps connected by a vertical gradient line; each step shows its step number (01/02/03), a Solar Duotone Bold icon, title, and description; staggered reveal.

**4.6 Testimonials (03):** `.section-number` "03"; 3 cards featuring **real headshot photos** (stable public portrait URLs, e.g., Unsplash or pravatar — real photos, never letter avatars) with descriptive alt text, 5-star amber rating icons, quote, name, and role; flashlight hover; headshots revealed via the 4-column clip slide-down.

**4.7 Pricing:** 3 tiers (e.g., Starter / Pro / Scale); the middle tier is highlighted with a "Most Popular" badge (sonar dot) and a gradient border (blue→violet); each tier has a price, a feature list with emerald check icons, and a pill CTA; cards use `.card` + flashlight hover.

**4.8 FAQ:** accessible accordion (5–6 items): `<button>` triggers with `aria-expanded` + `aria-controls`, CSS-animated expand/collapse (grid-rows or height technique), rotating chevron icon, fully keyboard operable.

**4.9 Final CTA:** large gradient headline, subcopy, the email capture form per 2.3 with button loading→success states, sonar decorations, and a container treated with border-beam or flashlight.

**4.10 Footer:** lettermark logo + tagline; secondary link columns (Product, Company, Resources, Legal); social icons via Simple Icons (X, GitHub, LinkedIn); bottom bar with copyright; links use coherent destinations (in-page anchors where applicable).

## 5. DELIVERABLE & OUTPUT FORMAT

* **Files:** separate, complete, runnable `index.html`, `style.css`, and `script.js`. External CDN references are allowed (Google Fonts, Iconify web component, Tailwind, optionally three.js). A single `<script src="script.js" defer>` entry point; no inline scripts, no inline styles, no inline SVGs.
* **Naming:** BEM exclusively (`block__element--modifier`) across HTML and CSS — one convention, never mixed.
* **Copy:** all user-facing copy in English with a luxury editorial tone, real and coherent for the Aura product; no lorem ipsum; placeholders only where content is genuinely unspecified.
* **script.js scope:** WebGL scene + column reveals, scroll-velocity tracking with snap-to-rest, IntersectionObserver staggers, card flashlight mouse tracking, marquee track duplication, accordion, mobile menu, form validation — no dead code.
* Generate the full code for all three files in your response, on the first attempt.