Futuristic UI Glassmorphism demo
Futuristic UI Glassmorphism

A futuristic dark-themed design featuring translucent frosted-glass panels with blur effects, glowing edges, and layered 3D depth.
Category: Glass & Soft UI
Era: 2020s Modern
Prompt: 16.1 KB · 2143 words
# SYSTEM PROMPT — BUILD SPECIFICATION: "FUTURISTIC UI GLASSMORPHISM" LANDING PAGE

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-grade Landing Page on the **first attempt** — deliver full, final, runnable code with no follow-up questions, no TODOs, and no truncated output. The design category is **Glass & Soft UI**; the theme is **Futuristic UI Glassmorphism**. Every rule in this document is **mandatory** unless explicitly marked as an exception.

---

## 0. PROJECT BRIEF & PAGE ARCHITECTURE

**0.1 Theme Identity & Visual Direction**
* **Name:** Futuristic UI Glassmorphism — **Type:** Futuristic, Analytical, Cinematic — **Era:** Future Glass.
* **Keywords:** glassmorphism, futuristic, ui, glass, transparent, blur, glowing, 3d.
* **Light/Dark:** ✗ No light mode / ✓ Full dark mode → this is a **dark-only** experience (see explicit exception in Rule 1.3).
* **Target look (AI Visual Direction):** "glassmorphism landing page, futuristic glass ui, transparent panels, blur effects, glowing edges, dark background, 3d interface."
* **Mandatory visual effects — all realized in pure CSS, no image files, no inline SVG:** isometric 3D rendered asset look (CSS `perspective` + `rotateX/rotateY` + `transform-style: preserve-3d` compositions), glowing circuit-board traces (pseudo-elements, gradient lines, animated pulse keyframes), glass-like panels (Rule 0.2 recipe), luminous neon (accent glows, gradient-clipped headline spans), internal luminescence (inset `box-shadow` glows and radial gradients inside panels).

**0.2 Visual Foundation (exact values from the style spec — do not deviate)**
* **Palette:** Background `#020814`, Text `#FFFFFF`, Accent `#00F0FF`; Glass White `#FFFFFF10`, Border Glow `#00F0FF80`, Shadow `#000000`.
* **Page base:** `background-color: #020814; color: #FFFFFF; font-family: 'Exo 2', sans-serif;`
* **Core glass recipe — every glass surface combines exactly:**
```css
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
```
* Provide an `@supports not (backdrop-filter: blur(10px))` fallback that substitutes a more opaque solid fill so panels remain legible without blur support.

**0.3 Product & Copy Direction**
* Invent **one** coherent fictional product and stay consistent: a real-time analytics intelligence platform (suggested names: "NexaFlow", "Lumina", "Aetheris" — pick one). All user-facing copy in **English**, specific and realistic: metrics, feature names, personas, prices. **No lorem ipsum anywhere.**

**0.4 Required Page Sections (build all, in this order)**
* **0.4.1 Sticky Glass Navbar** — wordmark logo + Material Symbol, anchor links (Features, How It Works, Testimonials, Pricing, FAQ), "Get Started" `.btn` (smooth-scrolls to Pricing). On scroll, the navbar gains stronger blur/border via a class toggle. Mobile: hamburger (Material Symbol `menu`) opens a glass dropdown panel (`z-index: var(--z-dropdown)`), `aria-expanded`, closes on Esc / outside click / link click, focus managed.
* **0.4.2 Hero** — full-viewport: status badge chip, single `h1` with a gradient neon accent span, subheadline, dual CTAs (`.btn--primary` "Get Started" → scroll to Pricing; `.btn--glass` "Watch Demo" → opens the Demo Modal, Rule 2.4), and a **pure-CSS isometric 3D scene**: a tilted dashboard mock of layered glass panels with floating metric chips, animated glowing circuit traces, ambient blurred glow orbs, and a faint grid backdrop. Optional stats row of 3 glass chips (e.g., "99.99% uptime", "2M+ events/sec", "150+ integrations"). Entrance animation (fade/rise), reduced-motion safe.
* **0.4.3 Features — 3 cards** — flex row wrapping to a column below 768px. Each `.glass-card`: Material Symbol in a glowing glass tile, title, 2–3 sentence description. Suggested: Real-Time Analytics (`monitoring`), Predictive Intelligence (`insights`), Zero-Trust Security (`shield_lock`).
* **0.4.4 How It Works — 3 steps** — numbered 01/02/03 glass panels joined by glowing circuit-trace connectors (CSS pseudo-elements); horizontal ≥1024px, vertical stack with a vertical connector on mobile. Steps: Connect (`hub`) → Analyze (`monitoring`) → Deploy (`rocket_launch`).
* **0.4.5 Testimonials — 3 cards** — glass quote cards: 5-star row (Material Symbol `star`, filled), quote, monogram avatar (initials inside a glowing glass circle — no images), name, role/company.
* **0.4.6 Pricing — 3 tiers** — glass cards; middle "Pro" tier highlighted with `--glow` border + "Most Popular" badge; feature lists with `check` icons; per-tier CTA. Suggested: Starter $0, Pro $29/mo, Enterprise Custom. Include an accessible Monthly/Annual segmented toggle (`aria-pressed`, prices update with a subtle transition, "Save 20%" note, price region announced via `aria-live`).
* **0.4.7 FAQ — accordion** — 5–6 realistic questions (pricing, security, integrations, data privacy, onboarding, cancellation) built per Rule 2.5.
* **0.4.8 Final CTA** — full-width glass panel with internal luminescence (inset accent glow + gradient border): headline, supporting line, inline email-capture `.input-group` + glowing submit `.btn` exercising the full state flow (loading → success with `aria-live` confirmation).
* **0.4.9 Footer** — brand block + tagline, secondary link columns (Product / Company / Resources / Legal), icon links (Material Symbols with `aria-label`), bottom bar with copyright + legal links. All links carry real `href`s (section anchors).

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. **Forbidden:** `style="..."` attributes, inline `<style>` blocks, and inline event handlers (`onclick=` etc.).
* Target all design properties, layout rules, and states via class/ID selectors only.
* HTML remains clean, semantic, and style-agnostic: re-skinning the page must require editing CSS only, never the markup.

**1.2 CSS Variables & Theme Tokens**
Define in `:root` (exact names required):
* **Colors:** `--primary: #00F0FF; --secondary: #FFFFFF10; --bg-primary: #020814; --bg-secondary: rgba(255,255,255,0.05); --text-primary: #FFFFFF; --text-secondary: rgba(255,255,255,0.72); --text-success: #00FFA3; --text-error: #FF4D6D; --border-default: rgba(255,255,255,0.1); --border-error: rgba(255,77,109,0.5); --border-success: rgba(0,255,163,0.5);`
* **Glass & glow:** `--glass-bg: rgba(255,255,255,0.05); --glass-bg-hover: rgba(255,255,255,0.10); --glass-border: rgba(255,255,255,0.1); --glow: #00F0FF80; --glow-strong: #00F0FF; --shadow-color: #000000; --blur-glass: 10px; --blur-glass-strong: 20px;`
* **Radii & shadows:** `--radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm; --shadow-md` (deep black shadows, e.g. `0 8px 32px rgba(0,0,0,0.4)`); glow shadows `--glow-sm: 0 0 12px rgba(0,240,255,0.25); --glow-md: 0 0 24px rgba(0,240,255,0.45);`
* **Spacing & transitions:** `--spacing-gap: 1.5rem; --transition-fast: 150ms; --transition-normal: 300ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);`
* **Elevation/stacking:** `--z-dropdown: 100; --z-modal: 200; --z-toast: 300;`
* **Typography:** `--font-base: 'Exo 2', sans-serif;`
* **Contrast pairing (mandatory):** dark backgrounds pair with light text only; when the bright accent `#00F0FF` is used as a **fill**, it must pair with dark text `#020814` — never white-on-cyan. Glass fills pair with `--text-primary`/`--text-secondary`.
* If any near-white surface is ever required, use `#fefefe`, never `#ffffff`.

**1.3 Mandatory Dark Mode — with explicit exception**
* Dark mode is the canonical theme: the complete dark token set is defined directly in `:root` (the default), and all theming remains variable-driven so any future theme is achievable through CSS alone, with zero HTML restructuring.
* **Exception clause:** the source style spec mandates a dark-only experience ("Light/Dark: ✗ No / ✓ Full"); therefore no light-mode palette, no `prefers-color-scheme` light variant, no theme toggle, and no `localStorage` theme persistence are required for this deliverable.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build **all** layout structures with Flexbox (`display: flex`). Card grids are `flex-wrap` rows with flexible children (e.g., `flex: 1 1 320px`) — no CSS Grid.
* Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., top-aligned text stacks inside cards).
* Mobile-first: base styles are single-column; enhance at ≥640px, ≥768px, ≥1024px. No horizontal scrolling at any width; no fixed pixel widths on containers.

**1.5 Styling Engine**
* Use clean, hand-written, token-driven custom CSS for this deliverable. All styles bind to the CSS variables above and to reusable component classes (`.btn`, `.glass-card`, `.input-group`); any utility classes used must map back to these tokens.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load **Exo 2** (weights 300–800) from Google Fonts via `<link>` in `<head>` and bind it to `--font-base`. Headings 700/800 with fluid `clamp()` sizes; body 400/500.
* **All icons via Google Material Symbols (Rounded)** loaded from Google Fonts. **Explicitly forbidden:** raw inline SVGs, local icon files, emoji-as-icons. Suggested set: `monitoring, insights, shield_lock, hub, rocket_launch, star, check, close, expand_more, menu, arrow_forward, mail, progress_activity, error, check_circle`.
* Decorative visuals (circuit traces, glow orbs, isometric panels) are pure CSS only.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button (`.btn` + BEM modifiers)**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `border-radius: var(--radius-pill)`; Exo 2 weight 600. Variants: `.btn--primary` (fill `--primary`, text `#020814`, `--glow-md` shadow), `.btn--glass` (glass recipe, white text), `.btn--ghost` (transparent, accent text), `.btn--danger` (distinct neon-red treatment, Rule 3.5).
* **Hover:** brightness increase + glow intensify, `cursor: pointer`, `transition: var(--transition-fast)`.
* **Focus:** distinct visible ring via `:focus-visible` — `outline: 2px solid var(--glow)` with offset; never remove focus styles.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading (`.is-loading`):** `pointer-events: none`, prevents double-clicks/double submission, swaps the icon slot to a spinner (animated Material Symbol `progress_activity` or CSS border spinner) **without changing button dimensions**.
* **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`
* **Success/Error (`.is-success` / `.is-error`):** temporary feedback — border/text shift to `--text-success` / `--text-error` plus icon swap; used for form submission feedback.

**2.2 Card (`.glass-card`)**
* **Default:** flex column layout; exact glass recipe (Rule 0.2); `box-shadow: var(--shadow-md)`.
* **Hover (interactive cards):** `transform: translateY(-2px)`, border shifts to `--glow`, glow shadow appears; `transition: var(--transition-normal)`.
* **Focus-within:** card border glows accent when a child link/button receives focus.
* **Loading (skeleton):** `.skeleton` shimmer (animated gradient sweep) with reserved fixed heights — zero layout shift.
* **Empty state:** structured fallback with a centered Material Symbol and clear guidance text (define `.glass-card--empty`; apply to any dynamic area that can be empty).

**2.3 Form & Input (`.input-group`)**
* **Structure:** flex column wrapping a `<label>`, a glass `<input>`, and a dedicated error/feedback container with `aria-live="polite"`.
* **States (all class-driven):** empty, focused (accent glow ring), filled, valid (success border + `check_circle` icon), invalid (error border, `--text-error` message + `error` icon — never color-only), disabled, read-only.
* Glass input: `--glass-bg` fill, `--glass-border`, white text, placeholder at `rgba(255,255,255,0.55)` minimum; use `type="email"`, `autocomplete="email"`, `required`, and `novalidate` on the form so custom JS validation drives the consistent accessible error UI.
* Submission feedback renders inline (button `.is-success` + confirmation message) or as a glass toast (`.toast`, `z-index: var(--z-toast)`, `aria-live`).

**2.4 Modal / Popup (`.modal`) — Demo Modal**
* **States (all animated via CSS transitions):** opening (fade + scale 0.95→1), open, loading (skeleton shimmer while the "demo loads", ~800ms), success/error variants defined, closing (reverse animation).
* **Structure:** fixed backdrop `rgba(2,8,20,0.7)` + `backdrop-filter: blur(8px)`; centered flex container (`align-items: center; justify-content: center`); glass panel with `--blur-glass-strong`, `--glow` border, `z-index: var(--z-modal)`.
* **Content:** after loading, reveal a pure-CSS animated dashboard preview (mini glass panels, glowing animated bars).
* **UX/A11y:** `role="dialog"`, `aria-modal="true"`, `aria-labelledby`; Material Symbol `close` button (`aria-label`); keyboard focus trapping (Tab/Shift+Tab cycle); close via Esc and overlay click; focus returns to the trigger on close; body scroll locked while open.

**2.5 FAQ Accordion (`.accordion`)**
* Each item: glass panel; `<button aria-expanded>` wrapping the question + `expand_more` symbol (rotates 180° when open); answer in a `role="region"` panel animated via the CSS `grid-template-rows: 0fr → 1fr` technique.
* Fully keyboard operable (native buttons); height animation respects `prefers-reduced-motion`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` typography (H1 ≈ `clamp(2.5rem, 6vw, 4.5rem)`), fluid section spacing, wrapping flex layouts, zero horizontal overflow at every breakpoint.
* **Smooth animations:** every state change transitions via `var(--transition-fast)` / `var(--transition-normal)` with `var(--ease-standard)`. Scroll-reveal via IntersectionObserver (`.reveal` → `.is-visible`); only hide content once JS is confirmed loaded (the script sets a class on `<html>` first) so nothing is invisible without JS. Anchor navigation uses smooth scrolling plus `scroll-margin-top` for the sticky navbar.
* **Accessibility (a11y):** body text contrast ≥ 4.5:1 on `#020814` (white ≈ 18:1; `--text-secondary` passes; dark `#020814` text on `#00F0FF` fills passes). Never rely on color alone to communicate state. Semantic HTML5 landmarks (`header`/`nav`/`main`/`section`/`footer`), a single `h1` with logical heading order, a skip-to-content link, logical DOM/focus order, full keyboard operability (no mouse-only interactions), and `aria-live` regions for all dynamic feedback (form errors/success, demo loading, price changes).
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Destructive actions:** any `.btn--danger` or delete-style action must be visually distinct (neon-red border/glow) and legible in this dark theme.
* **Reduced motion:** `prefers-reduced-motion` disables transforms, parallax, shimmer, and pulses (opacity-only fades allowed); the page remains fully usable.
* **Performance:** apply `backdrop-filter` deliberately on key surfaces, avoid nesting many heavy blurs, and animate only `transform`/`opacity`.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File structure:** separate `index.html`, `style.css`, and `script.js` — complete and runnable by opening `index.html` directly. The HTML contains exactly one `<script src="script.js" defer>` reference; no inline scripts, no inline styles, no inline handlers. Google Fonts `<link>` tags (Exo 2 + Material Symbols) in `<head>` are expected, along with `lang="en"`, viewport meta, meta description, and a descriptive `<title>`.
* **Naming convention:** BEM everywhere (`.btn`, `.btn--primary`, `.glass-card`, `.accordion__item`, `.modal__panel`, `.input-group__error`…). One convention, never mixed; JS hooks use the same classes or `data-*` attributes.
* **No unrequested placeholders:** all user-facing copy in **English**, realistic and theme-consistent per Rule 0.3 — invented brand, headlines, feature descriptions, testimonials, prices, and FAQ answers. No lorem ipsum, no placeholder images (all visuals are pure CSS), no empty sections.
* **Completeness:** deliver the entire landing page — every section in Rule 0.4 and every component state in Section 2 — as one final output on the first attempt.