LIQUID-GLASS-NOIR

Liquid Glass Noir

Frosted translucent panels over dark video backgrounds with liquid-glass edge refraction and floating glass cards.

Difficulty:★★★★☆

Mood:Translucent · Dark · Frosted · Premium · Spatial

Glass & Spatial

Visual DNA

Frosted, translucent surfaces layered over dark video backgrounds. Elements feel like physical glass panes floating in space with light refraction at edges. The liquid-glass border technique (inset gradient border with mask-composite) creates premium depth. No purple, no cream — pure dark elegance with white/light glass surfaces. The background video provides ambient motion. Glass panels float above it with backdrop-filter blur. The 1px inner border gradient (white/30 → transparent → white/30) creates the illusion of light bending through glass at the edges. It's Apple's Vision Pro aesthetic translated to the web — but darker, moodier, more cinematic.

Design Principles

DEPTH THROUGH LAYERING

Not shadow, not color — Z-axis stacking of translucent surfaces creates depth. Each glass panel sits at a different Z-level, with backdrop-blur creating the sense of looking through frosted glass to the layer below.

What it prevents: Using drop shadows or colored backgrounds for separation.

---

REFRACTION AT EDGES

The 1px inner border gradient creates the illusion of light bending through glass. The gradient goes: white/30 at top → transparent in middle → white/30 at bottom. This is the "liquid-glass" effect — it makes flat surfaces feel like physical glass panes.

What it prevents: Plain borders that look like UI chrome instead of glass.

---

VIDEO AS ATMOSPHERE

Background video provides ambient motion. It's not content — it's atmosphere. The video should be slow, abstract, and dark. Glass surfaces float above it. The video is always playing, always moving, never demanding attention.

What it prevents: Static dark backgrounds that feel flat and lifeless.

---

SPRING PHYSICS FOR FLOATING

Glass panels respond to hover with spring-physics movement — gentle lift, subtle scale. The motion feels physical, like pushing a glass pane slightly. Not linear, not bouncy — spring with damping.

What it prevents: Static cards that don't respond to interaction.

---

RESTRAINT IN GLASS

Not every surface needs to be glass. Use glass for: navigation, feature cards, CTA panels, floating elements. Use solid near-black for: background, text areas, code blocks. The contrast between glass and solid creates hierarchy.

What it prevents: Backdrop-blur on everything, which creates a washed-out, unfocused page.

Typography System

# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Clean geometric sans |
| **Examples** | Inter Tight (500/600), Satoshi, SF Pro Display, Geist |
| **Weight** | 500-600 (medium-semibold) |
| **Tracking** | -0.02em to 0 (tight on headlines) |
| **Size** | `clamp(2rem, 5vw, 4rem)` |

**Why geometric:** Clean, modern, readable against frosted surfaces. The geometric quality complements the precision of the glass edges.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Same family as display |
| **Weight** | 400-500 |
| **Size** | `clamp(0.8rem, 0.4vw + 0.65rem, 0.95rem)` |
| **Line Height** | 1.5-1.6 |

---

## Glass Surface Text

Text on glass panels must have sufficient contrast:
- On frosted glass over dark video: use white (#FFFFFF) or near-white (#F0F0F0)
- On frosted glass over light areas: use near-black (#1A1A1A)
- Always test contrast — backdrop-blur can reduce readability

---

## Type Scale

```
Display:  clamp(2rem, 5vw, 4rem)    — hero headlines
Headline: clamp(1.25rem, 2.5vw, 2rem) — section titles
Body:     clamp(0.8rem, 0.4vw + 0.65rem, 0.95rem)
Micro:    0.7rem — labels on glass panels
```

Color Architecture

# Color Architecture

## Ground

```css
--color-ground: #0A0A0A;  /* Behind the video */
```

The video provides the visual ground. The near-black is only visible at video edges or during loading.

---

## Glass Surfaces

```css
--glass-bg: rgba(255, 255, 255, 0.05);     /* Primary glass */
--glass-bg-hover: rgba(255, 255, 255, 0.08); /* Hover state */
--glass-border: rgba(255, 255, 255, 0.1);    /* Outer border */
```

**Key:** The glass background is nearly transparent (5% white). The blur does the visual work, not the background color.

---

## Text on Glass

```css
--glass-text: #FFFFFF;           /* Primary text on glass */
--glass-text-secondary: rgba(255,255,255,0.7); /* Secondary */
--glass-text-muted: rgba(255,255,255,0.5);     /* Labels */
```

---

## Accent

```css
--color-accent: #FFFFFF;  /* White accent — the glass itself IS the accent */
/* Or one subtle color: */
--color-accent-blue: rgba(100, 180, 255, 0.8);
```

**Rule:** In Liquid Glass Noir, the glass IS the visual interest. Additional accent colors should be minimal — white or a subtle blue work best.

---

## The Liquid-Glass Border

```css
.liquid-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.3) 0%,
    rgba(255,255,255,0.05) 30%,
    rgba(255,255,255,0) 50%,
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,0.05) 90%,
    rgba(255,255,255,0.3) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
```

**This is the signature effect.** The gradient border creates the illusion of light refracting through the edge of a glass pane.

---

## Color Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Pure black glass backgrounds | rgba(255,255,255,0.05) with blur |
| Heavy backdrop-blur (>40px) | 12-24px blur for readability |
| Multiple glass layers with same blur | Vary blur per Z-depth |
| Colored glass tinting | Keep glass neutral/clear |
| Opaque panels | Always translucent |

Motion Principles

# Motion Principles

## Philosophy

Motion in Liquid Glass Noir is **slow and fluid, like light moving through liquid glass**. Nothing snaps, nothing slides mechanically, nothing jitters. Panels float and settle with the weight of physical glass; the background video provides constant ambient motion underneath. The motion should feel cinematic — noir lighting, a slow camera push, glass panes drifting in darkness.

The style is **choreographed** (motion axis 5/6): layers move at different speeds and depths, hover reactions use spring physics, and reveals feel staged — but always slow and weighty. Fast motion breaks the glass illusion.

---

## Ambient Background Video

| Element | Animation | Duration | Easing |
|---------|-----------|----------|--------|
| Background video | Continuous play, muted, looped | — | — |
| Video scale | Subtle scale(1.0)→scale(1.03) drift | 20-30s | `ease-in-out`, infinite |
| Video darkness | Opacity 0.85 over `#0A0A0A` ground | static | — |

**The video is the light source.** Panels float above it; their blur reacts to what passes beneath. The video must never be brighter than the glass above it — the glass is the subject, the video is atmosphere.

---

## Floating Glass Layers

```css
@keyframes float-glass {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.glass-panel {
  animation: float-glass 9s ease-in-out infinite;
  will-change: transform;
}
```

| Layer | Animation | Duration | Easing |
|-------|-----------|----------|--------|
| Back panels (closest to video) | Drift 3-4px, blur 12px | 12-16s | `ease-in-out`, infinite |
| Mid panels (primary content) | Float -10px vertical, blur 20px | 9s | `ease-in-out`, infinite |
| Front panels (overlays, dialogs) | Float -6px + slight rotation 0.5deg | 7s | `ease-in-out`, infinite |

**Z-depth determines blur, speed, and amplitude.** Deeper panels are more blurred, move slower, and drift less. Front panels move faster and float higher. If all panels share the same blur and motion, the depth illusion collapses — this is the #1 motion mistake in glassmorphism.

---

## Liquid Distortion

```css
@keyframes distort-edge {
  0%, 100% { filter: blur(0px) brightness(1); }
  50% { filter: blur(0.5px) brightness(1.05); }
}
```

| Effect | Specification |
|--------|--------------|
| Edge refraction shimmer | The liquid-glass gradient border subtly shifts opacity 0.3→0.4 along its top edge | 6-8s |
| Glass ripple | On scroll or hover, a 1-2px border-radius wave passes across a panel | 900ms, once |
| Liquid reveal | New panels emerge via a mask wipe (bottom→top, 1.2s) + blur 8px→0 | 1.2s |
| Iridescent highlight drift | A soft light streak moves across the glass surface, 20% opacity | 10-14s, infinite |

**Liquid reveals, not slide-ins.** Panels should materialize like glass rising out of liquid — a mask wipe with an unblur feels like the pane condensing into focus. No bounce, no overshoot; glass settles once.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Background video | Fade in from black (noir iris-open feel) | 1500ms | `ease-out` | 0ms |
| Hero glass panel | Mask wipe bottom→top + blur 8px→0 + translateY(20px)→0 | 1200ms | `ease-out` | 200ms |
| Display text | Opacity 0→1 + translateY(8px)→0 | 900ms | `ease-out` | 500ms |
| Secondary panels | Same liquid reveal, staggered by Z-depth (front first) | 1200ms | `ease-out` | 300ms + 150ms per layer |

**Key:** Durations are long (900ms+). Panels enter in Z-depth order — front-most first — so the eye reads the composition as light settling, not content stacking.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Glass card | Slight lift translateY(-4px) + blur 20px→24px, spring | TranslateY(-2px), spring |
| Buttons | Border gradient brightens (white/0.3 → white/0.5), 400ms | Slight scale(0.98), 300ms |
| Links | Text color white→accent blue (100, 180, 255), 300ms | — |
| Panels with liquid border | Ripple wave passes along the edge once | 900ms |

**Hover uses spring physics** (stiffness ~120, damping ~14) — the panel should feel weighted, like nudging a real glass pane. Keep transitions at 300ms+; anything faster reads as cheap web, not glass.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- All floating: disabled (panels static)
- Video: pauses or switches to a static poster frame
- Liquid distortion: disabled
- Liquid reveals: instant opacity
- Hover lift: reduced to blur/opacity change only

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

---

## What NOT to Animate

| Never | Why |
|-------|-----|
| Fast, snappy transitions | Glass is heavy — it moves slowly |
| Bounce or exaggerated spring | Overshoot looks like plastic, not glass |
| Slide-in panels (horizontal) | Liquid glass rises or condenses, it doesn't slide |
| Continuous border animation | The refraction border is a light effect, not a marquee |
| Particle effects / confetti | Breaks the noir restraint |
| Auto-playing carousels | The background video already provides ambient motion |
| Animated gradients on solid backgrounds | There are no solid backgrounds — only video and glass |

Layout Grammar

# Layout Grammar

## Grid System

**No visible grid.** The layout is asymmetric and Z-stacked: floating glass panels over a dark video background. Internally:

- Full-bleed sections: 100vw width, `min-h-[100dvh]`
- Panel grid: 12-column, but panels deliberately break column lines (offset, overlapping)
- Text containers: max-width 520-640px on glass
- Panels: placed at asymmetric offsets — never a symmetric 2×2 card grid
- Z-depth: 3 layers (back 12px blur / mid 20px blur / front 24px blur)

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-[100dvh]` |
| Background | Dark video (0.85 opacity) over `#0A0A0A`, no light bleed |
| Glass panel | One large frosted panel, offset left/right, never centered |
| Text position | Inside the glass panel, asymmetric (bottom-left of the pane) |
| Headline size | `clamp(2rem, 5vw, 4rem)` — clean geometric sans, 500-600 weight |
| Accent | A second small glass card floating behind the hero pane (depth) |

```
┌─────────────────────────────────────────┐
│   [Dark background video, 0.85 opacity] │
│   ┌─────────────────────────┐           │
│   │  ┌──────────────────┐   │  (back    │
│   │  │  (small glass    │   │   panel,  │
│   │  │   card, blur 12) │   │   24px    │
│   │  └──────────────────┘   │   blur)   │
│   │                         │           │
│   │  LIQUID GLASS           │           │
│   │  Frosted panels over    │           │
│   │  dark cinematic video   │           │
│   │  [ENTER]                │           │
│   └─────────────────────────┘           │
└─────────────────────────────────────────┘
```

**The hero is a scene, not a section.** One hero pane, one depth card behind it, one light direction. The video moves; the glass floats; text sits calmly inside the glass.

---

## Section Spacing

```css
--section-padding-y: clamp(5rem, 14vh, 11rem);
--panel-max-width: 640px;
--edge-margin: clamp(1.5rem, 4vw, 4rem);
--panel-gap: clamp(1.5rem, 3vw, 3rem);
--z-back: 10;    /* blur 12px  */
--z-mid: 20;     /* blur 20px  */
--z-front: 30;   /* blur 24px  */
```

**Spacing is generous and cinematic.** Panels float with dark space between them — the noir void is a feature. Density is balanced (3/6): layered cards, not sparse, but never crowded.

---

## Layout Patterns

### Pattern 1: Floating Glass Panel
```
┌─────────────────────────────────────────┐
│  [Dark video background]                │
│        ┌───────────────────┐            │
│        │  Glass panel      │            │
│        │  (blur 20, offset)│            │
│        │  text inside      │            │
│        └───────────────────┘            │
│                    (shadow beneath)     │
└─────────────────────────────────────────┘
```

### Pattern 2: Layered Depth (Hero)
```
┌─────────────────────────────────────────┐
│  [Dark video background]                │
│     ┌────────────────────────┐          │
│     │  ┌──────────────┐      │          │
│     │  │ small back   │  front pane     │
│     │  │ card (12px)  │  (24px blur)    │
│     │  └──────────────┘      │          │
│     └────────────────────────┘          │
└─────────────────────────────────────────┘
```

### Pattern 3: Offset Panel Row
```
┌─────────────────────────────────────────┐
│  [Dark video background]                │
│  ┌──────────┐            ┌───────────┐  │
│  │ Panel A  │            │ Panel C   │  │
│  │ (offset  │   ┌────┐   │ (offset   │  │
│  │  left)   │   │ B  │   │  right)   │  │
│  └──────────┘   └────┘   └───────────┘  │
│      (12px)     (20px)      (12px)      │
└─────────────────────────────────────────┘
```

**Panels overlap or offset — they never align into a strict grid.** Asymmetry (layout axis 3/6) is what keeps this from becoming a template.

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full floating panel compositions, 3 Z-depths, video full-bleed |
| **Tablet (768px)** | Panels stack, reduce to 2 Z-depths, keep offset alignment |
| **Mobile (375px)** | Single panel per section, full-width; panel blur 16px (performance); video dimmed to 0.9 for readability |

**On mobile:** backdrop-filter is expensive — cap blur layers at 2 and keep blur ≤ 16px. Panels become full-width sheets; the offset asymmetry survives through horizontal margins, not overlap.

---

## Layout Don'ts

| Don't | Do Instead |
|-------|------------|
| Symmetric card grids | Offset, overlapping floating panels |
| Centered everything | Asymmetric placement with one dominant pane |
| Opaque containers | Translucent glass with blur |
| Flat panels with no depth | 3 Z-layers with varied blur |
| White/light backgrounds | Dark video over `#0A0A0A` |
| Panels that touch | Dark void space between panels (shadow + gap) |
| Uniform panel sizes | One dominant pane + smaller supporting cards |

Texture & Surface

# Texture & Surface

## Primary Surface: Frosted Glass

The texture IS the glass. Panels are near-transparent (5% white) and the blur does the visual work — never the background color. Every surface must read as a physical pane with thickness, refraction, and edge light.

| Surface | Specification |
|---------|--------------|
| **Glass background** | `rgba(255, 255, 255, 0.05)` — nearly transparent |
| **Backdrop blur** | `blur(20px) saturate(1.2)`, range 12-24px by Z-depth |
| **Outer border** | `1px solid rgba(255, 255, 255, 0.1)` |
| **Inner refraction edge** | The liquid-glass gradient border (below) |

**Key:** The glass background is nearly transparent (5% white). The blur does the visual work, not the background color.

---

## The Liquid-Glass Border

This is the signature effect — an inset gradient border created with mask-composite that simulates light refracting through the edge of a glass pane:

```css
.liquid-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.3) 0%,
    rgba(255,255,255,0.05) 30%,
    rgba(255,255,255,0) 50%,
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,0.05) 90%,
    rgba(255,255,255,0.3) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
```

**The gradient border creates the illusion of light refracting through the edge of a glass pane** — brightest at top and bottom edges, fading through the middle, like light catching the rim. The technique is complex to implement correctly (difficulty 4/5); the reward is depth that reads as physical, not decorative.

---

## Iridescent Highlights

```css
.glass-highlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(100, 180, 255, 0.08) 55%,
    transparent 70%
  );
  pointer-events: none;
}
```

**Purpose:** A soft, diagonal light streak across the glass surface — the sheen you see on a real pane under directional light. It must be subtle (10-15% opacity), white-to-blue (100, 180, 255), and static or drifting very slowly. The highlight is what separates "glass" from "gray translucent box."

---

## Noir Lighting Logic

| Property | Rule |
|----------|------|
| Light source | One consistent direction (top-left / top-right) across ALL panels |
| Edge brightness | Top edge brightest (`rgba(255,255,255,0.3)`), bottom dimmer |
| Highlight alignment | All streaks share the same angle — one studio light, not many |
| Shadow | Panels cast soft shadows beneath (black, 0.4-0.5 opacity, 20-30px blur) |
| Video exposure | Keep the video dark (0.85 opacity over `#0A0A0A`) so glass edges stay visible |

**Glass without light logic looks flat.** Every panel must agree on where the light comes from — inconsistent highlights are the fastest tell of a fake glassmorphism.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Dark video (0.85 opacity) over `#0A0A0A` ground |
| Glass panels | `rgba(255,255,255,0.05)` + blur + liquid-glass border |
| Cards | 12-16px radius, floating, spring hover lift |
| Buttons | Glass surface, border brightens on hover (white/0.3 → white/0.5) |
| Navigation | Glass bar with 20px blur, sits at the top Z-layer |
| Dividers | None — panels separated by Z-depth and shadow, not lines |
| Text | White `#FFFFFF`; near-black `#1A1A1A` only where glass floats over light areas |

**Vary blur per Z-depth.** Back panels 12px, mid panels 20px, front panels 24px. Uniform blur = flat stack of stickers, not a glass scene.

---

## Texture Don'ts

| Don't | Do Instead |
|-------|------------|
| Pure black glass backgrounds | `rgba(255,255,255,0.05)` with blur |
| Heavy backdrop-blur (>40px) | 12-24px blur for readability |
| Multiple glass layers with same blur | Vary blur per Z-depth |
| Colored glass tinting | Keep glass neutral/clear |
| Opaque panels | Always translucent |
| Flat white-glass clichés (white gradient cards, no refraction) | Liquid-glass border + directional highlight |
| Random iridescent colors | White highlight with a single subtle blue (100, 180, 255) |

Vocabulary Bank

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `glassmorphism` | The core visual language — translucent, blurred surfaces over color |
| `backdrop blur` | The frosted effect itself — `backdrop-filter: blur()` on glass panels |
| `frosted panel` | A translucent, blurred surface carrying content above the video |
| `liquid-glass border` | The signature 1px inset gradient border via mask-composite — the edge refraction |
| `noir lighting` | Hard key light, deep shadows, cinematic darkness — the mood of the ground |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `specular highlight` | The bright glint at the light-facing edge of a glass pane |
| `refraction` | Light bending through glass edges — simulated by the inset border gradient |
| `Z-depth` | The distance of a panel above the video, expressed in blur and shadow intensity |
| `mask-composite` | The CSS technique (mask-composite: exclude) that keeps the border gradient on the 1px edge |
| `iridescence` | The subtle color shift as light moves across the glass surface |
| `glass border` | The 1px outer border, `rgba(255,255,255,0.1)` |
| `glass tint` | The near-invisible panel fill, `rgba(255,255,255,0.05)` — the blur does the work |
| `scrim layer` | A darkened overlay behind text-heavy panels to guarantee readability |
| `floating chip` | A small, isolated glass element at high Z-depth — an accent, not a container |
| `translucent text` | White text at 50-100% opacity on glass — primary, secondary, muted steps |

---

## Context Terms

| Term | Mood |
|------|------|
| `noir` | Dark, moody, cinematic — shadows and single light sources |
| `cinematic video ground` | The dark, slow-moving video the glass floats above |
| `spatial depth` | Panes visibly floating at different heights over the video |
| `Vision Pro aesthetic` | The reference point — translucent glass over spatial video |
| `dark elegance` | Near-black ground + white glass — no purple, no cream |
| `premium restraint` | The glass is the accent; color is withheld |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `purple glow` | The cliché of every AI website — banned explicitly |
| `cream / warm panels` | Fights the noir cold-dark ground |
| `heavy blur (40px+)` | GPU-heavy, destroys performance |
| `flat glass` | Glass without iridescence or light is a gray rectangle |
| `uniform blur` | Same blur on every panel kills Z-depth |
| `identical cards` | Repetitive frosted rectangles — template slop |
| `opaque panels` | Glass is always translucent |
| `solid color sections` | The video is the background — no solid breaks |
| `saturated palette` | White and one subtle blue only |
| `gold accents` | Warm metal against noir glass reads cheap |

---

## Prompt-Ready Phrases

```
"dark video background — noir atmospherics, smoke, water, slow city light"
"frosted glass panels with backdrop-filter blur(16-20px) saturate(1.2)"
"liquid-glass border — 1px inset gradient via mask-composite: exclude"
"specular highlights at the light-facing edge of each pane"
"iridescent sheen — slow light sweep across the glass surface (2-4s)"
"Z-depth layering — near panels blur(24px), far panels blur(12px)"
"glass tint rgba(255,255,255,0.05) — the blur does the visual work"
"white text on glass with scrim layers for contrast"
"clean geometric sans (Inter Tight/Satoshi/Geist) at 500-600 weights"
"no purple, no cream — pure dark elegance with white glass"
"asymmetric floating panels — not a uniform card grid"
"spatial depth — panels cast soft shadows and float over the video"
```

Anti-Slop Checklist

☐Dark cinematic video backgrounds (0.85 opacity over `#0A0A0A`) — never light or colorful backdrops

☐Near-transparent glass (`rgba(255,255,255,0.05)`) — the blur does the work, not the background color

☐Backdrop blur 12-24px, varied per Z-depth (back 12 / mid 20 / front 24)

☐Liquid-glass border (inset gradient + mask-composite) on every panel

☐One consistent light direction across all panels (highlight streaks aligned)

☐Subtle iridescent highlights (white → blue 100,180,255, 10-15% opacity)

☐Floating glass layers with slow fluid motion (7-16s loops, spring hover)

☐Liquid reveals — mask wipe + blur-to-sharp, never slide-ins

☐Clean geometric sans at medium weight (Inter Tight, Satoshi, SF Pro Display, Geist)

☐White text with verified contrast against frosted surfaces

☐Asymmetric, Z-stacked layouts — panels offset, never a symmetric grid

☐Panels separated by dark void and soft shadows (no dividers, no borders between)

☐Noir restraint — dark, moody, cinematic; no purple, no cream

☐No default frosted-card template look (identical rounded cards in a grid)

☐No flat white-glass clichés (solid white gradients, no refraction, no light logic)

☐No heavy backdrop-blur (>40px) that destroys readability

☐No colored glass tinting — glass stays neutral/clear

☐No opaque panels

☐No uniform blur across layers (collapses the depth illusion)

☐No fast or bouncy motion (glass is heavy; 300ms+ minimum)

☐No bright backgrounds — the video must never outshine the glass

☐No stock-photo-style light backgrounds or rainbow iridescence

☐`prefers-reduced-motion` honored (static panels, video paused or poster frame)

When to Use

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Spatial / immersive tech** | The Vision Pro-derived glass aesthetic literally matches spatial products |
| **Audio & music (dark)** | Cinematic noir video + glass reads premium; fits dark ambient, scoring, spatial audio |
| **Premium consumer electronics** | Dark elegance signals flagship, not budget |
| **Film / cinematic studios** | The noir lighting and video-first layout match the craft |
| **Luxury/fashion (dark)** | Frosted glass over slow light reads expensive — pairs with near-black campaigns |
| **Crypto/Web3 (high-end)** | Dark glass communicates serious, despite the novelty-prone category |
| **Design studios & portfolios** | The liquid-glass border demonstrates craft and motion taste |

## Brand Personality Match

This style reinforces brands that are:
- **Premium** — dark elegance, restrained color, expensive restraint
- **Cinematic** — noir mood, single light sources, video-first storytelling
- **Spatial** — depth, floating layers, physical surfaces in virtual space
- **Cool / understated** — no purple glow, no cream warmth, no hype
- **Confident** — white glass as the only accent takes conviction

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Corporate/B2B documentation** | Noir glass reads as presentation, not substance |
| **Content-heavy sites (news, docs)** | Glass panels and video-first layout can't carry long-form text |
| **Bright consumer e-commerce** | The dark, moody ground fights product photography on white |
| **Healthcare / trust-critical** | Opaque, reassuring surfaces beat translucent luxury here |
| **Accessibility-stringent products** | Video background + frosted text is hard to make WCAG-conformant |
| **Government / legal** | Too cinematic, too "consumer," too much motion |
| **Reliance on thumbnail colour** | Glass is white-on-dark by design — saturated brands feel muted |

## How to Decide

Ask: **"Does my brand want to feel like a cinematic nightclub for software — dark, spatial, ice-glass, and unapologetically premium?"**

If yes → Liquid Glass Noir.
If no → Consider **dark-tech-terminal** (if you want dark but terminal-serious, text-first), **obsidian-precision** (if you want dark and exact, tool-grade), or **futuristic-fashion** (if you want the dark editorial edge but with more fashionable type and silhouette energy).

Common Mistakes

Mistake 1: Heavy Backdrop Blur

**What people do:** Crank backdrop-filter blur to 40px+ "so the glass really blurs the background."

**Why it fails:** High blur radii are GPU-hungry. With multiple glass layers over a dark video background, the page drops into laggy, janky scroll — the video ground plus multiple blurred panels force expensive re-renders. Performance breaks before the aesthetic does.

**Fix:** Keep blur between 12-24px (the color architecture specifies 12-24px). Layer the effect instead — more glass panes at a modest blur reads as more premium than one heavily-blurred pane. Add `will-change` and `transform: translateZ(0)` sparingly, only on the panels that truly need it. Test on a mid-range mobile GPU, not your development machine.

---

Mistake 2: Unreadable Text on Glass

**What people do:** Place white text on top of a light background video with only a 5% white glass tint behind it.

**Why it fails:** The glass background is `rgba(255,255,255,0.05)` — nearly invisible on purpose. When the video behind the panel is bright (light sky, white product, a lit room), frosted glass alone does not lift text to readable contrast. The words wash out into the footage.

**Fix:** Test text contrast against the brightest frame of the background video, not the near-black ground. Darken the glass only where text sits, or add a scrim layer to panels holding copy. Use the contrast ladder — `#FFFFFF` primary, `rgba(255,255,255,0.7)` secondary, `rgba(255,255,255,0.5)` labels — and never place body text at the 0.5 step.

---

Mistake 3: No Light-Source Consistency

**What people do:** Every glass panel gets the same border gradient pointing the same direction, regardless of where light enters the scene.

**Why it fails:** The liquid-glass border is meant to look like physical refraction — light bending through a pane. If the hero video has key light from the top-left and every card's highlight runs identically down the top edge, the glass stops feeling physical and reads as a CSS trick. The illusion depends on consistent lighting direction across every surface in the shot.

**Fix:** Choose one light direction from the video and commit to it — highlights along the light-facing edges, shadowed edges opposite. Match the inner border's bright stops to the video's key light. Vary the border gradient's orientation per panel position. If the video's light moves, the panes should feel it.

---

Mistake 4: Overused Frosted Cards

**What people do:** Frosted card after frosted card — 10 identical floating rectangles at the same Z-depth over the same backdrop.

**Why it fails:** The style is named for the glass, and the signature effect — `mask-composite` gradient borders, edge refraction — only registers when the glass is special. A grid of identical frosted cards looks like a generic 2023 SaaS template. Repetition kills the luxury.

**Fix:** Treat each glass pane as a deliberate set-piece. Vary Z-depth and panel shape with asymmetric border-radius. Use fewer, larger panels and let the video breathe between them against the near-black ground. Mix full-width hero panes with small floating chips. When a card is the 6th identical rectangle, replace it with plain text over video.

---

Mistake 5: Flat, Dead Glass (No Z-Depth)

**What people:** Every panel on the page feels like the same glass pane — same blur, same border, same opacity — copy-pasted at different coordinates.

**Why it fails:** Glass earns its spatial label only from depth. Real panes blur the video behind them at different rates based on distance from the surface. When every panel accepts the same 20px blur and identical border, the floating illusion dies — it becomes stickers on one plane, not glass in space.

**Fix:** Assign each panel a Z value and vary blur and border intensity with depth — `blur(12px)` with a faint border for far planes, `blur(24px)` with the full gradient border for near ones. Add a soft drop-shadow beneath near panels so they visibly hover above the video. A near card and a far card should not be twins.

---

Mistake 6: Dead Flat Glass (No Iridescence)

**What people do:** Use a single solid white/10 background, a plain border, blur — done.

**Why it fails:** Solid translucent glass with no moving light reads as an industrial window, not "liquid noir." The style's appeal lives in the refraction — specular highlights gliding across the surface, the border gradient catching a slow sheen. Remove the sheen and the material dies into a flat gray rectangle with a blur.

**Fix:** Give every significant glass surface slow light-life. Animate the border gradient sheen (2-4s cycle), place a specular highlight at the light-facing corner, tune the gradient values until the edges feel luminous. Glass that sits perfectly still is not liquid.

---

Mistake 7: Purple / Cream Tints Creeping In

**What people:** Add purple glow blooms, cream or warm panels, or gold accents "to make it feel premium."

**Why it fails:** Liquid Glass Noir is explicitly no purple, no cream — pure dark elegance with white/light glass surfaces. Warm cream glass fights the noir near-black ground; purple glows land on every overused AI-website cliché. The glass IS the accent — the moment you paint the panel, the depth dies and the style stops being luxury.

**Fix:** Restrain color to white or one subtle cool blue (`rgba(100, 180, 255, 0.8)`). If a section needs warmth, source it from the video — never from the panels. The glass and its 1px refraction border are the palette, and that restraint is the signature.

---

Mistake 8: Background Video Without Purpose

**What people do:** Use any abstract video as "ambient motion."

**Why it fails:** The ground video is not wallpaper — it builds the physical world the glass floats in, sets the light source, supplies the noir mood, and gives the blur something to affect. Random trippy clips turn noir into novelty; flat corporate footage gives the glass no light to refract.

**Fix:** Choose noir-appropriate video — dark atmospherics, smoke, water, slow city light, hard studio edge lighting. Play it slow, treat it as the canvas you light the glass against, and compose the panels to sit inside its world rather than on top of it.

Reference Gallery

# Reference Gallery

## Live Sites

### Liquid Glass Noir Reference Implementation
- **What works:** Frosted translucent panels over dark video backgrounds, liquid-glass edge refraction, floating glass cards, near-black ground (#0A0A0A), white glass surfaces, slow choreographed drift
- **URL:** Reference implementation — the canonical example of this style

### Apple Vision Pro (apple.com/vision-pro)
- **What works:** The definitive liquid-glass language — frosted translucent panels floating over video, edge refraction on glass borders, spatial depth, parallax as you scroll, glass that bends light at its edges
- **URL:** apple.com/vision-pro

### Linear (linear.app)
- **What works:** Dark-mode glassmorphism done with restraint — translucent surfaces with backdrop blur, hairline 1px borders, subtle top-edge light gradient, precise typography on glass, glow states on hover
- **URL:** linear.app

### Arc Browser (arc.net)
- **What works:** Dark cinematic surfaces with fluid, rounded organic shapes; translucent panels layered over blurred imagery; iridescent edge lighting; playful but premium spatial depth
- **URL:** arc.net

### Lusion (lusion.co)
- **What works:** The gold standard for liquid motion — fluid WebGL shapes flowing over dark backgrounds, light refracting through volumetric forms, slow choreographed camera drift, noir lighting on reflective surfaces
- **URL:** lusion.co

### Acne Studios (acnestudios.com)
- **What works:** Dark luxury fashion — moody noir lighting, near-black grounds, glossy reflective surfaces, editorial restraint, the "expensive darkness" mood Liquid Glass Noir lives in
- **URL:** acnestudios.com

### Applied AI (applied.ai)
- **What works:** Dark AI product site with glassy floating panels, backdrop blur over ambient video, subtle white-on-dark hierarchy, frosted cards that feel physical and weightless
- **URL:** applied.ai

### Awwwards Dark Glassmorphism Winners
- **What works:** Curated examples of dark glass over video backgrounds — floating panels, Z-depth stacking, liquid-glass border treatments, spring hover physics
- **URL:** awwwards.com (search "dark" and "glassmorphism" trends)

## Key Visual References

### Glass Material References
- **Liquid-glass edge** — 1px inset gradient border (white 0.3 → transparent → white 0.3) that reads as light bending through glass
- **Frosted panels** — backdrop-filter blur(20px) saturate(1.2) over video; blur 12-24px only, never heavy
- **Iridescent highlights** — subtle blue tint (rgba(100, 180, 255, 0.8)) at edges or hover, white/30 top-edge light
- **Fluid shapes** — organic, liquid forms; avoid sharp geometric corners

### Color References
- **Ground** — near-black #0A0A0A, visible only at video edges or during load
- **Glass surfaces** — rgba(255, 255, 255, 0.05) primary, 0.08 hover, 0.1 outer border; the blur does the visual work, not the fill
- **Text on glass** — pure white #FFFFFF primary, rgba(255,255,255,0.7) secondary, rgba(255,255,255,0.5) labels
- **Accent** — white (the glass IS the accent) or one subtle blue rgba(100, 180, 255, 0.8); no purple, no cream

### Typography References
- **Inter Tight (500/600)** — clean geometric sans, medium-semibold weights
- **Alternates** — Satoshi, SF Pro Display, Geist (keep the same family for display and body)
- **Tracking** — -0.02em to 0, tight on headlines
- **Sizes** — display `clamp(2rem, 5vw, 4rem)`, headline `clamp(1.25rem, 2.5vw, 2rem)`, micro 0.7rem labels on glass

### Motion References
- **Choreographed drift** — floating layers, 8-12s, barely perceptible, ease-in-out, infinite
- **Spring hovers** — glass cards lift and glow with spring physics, not linear transitions
- **Parallax** — panels at different Z-depths move at different rates over the video
- **Blur transitions** — focus shifts as elements enter/leave the glass layer

## Screenshot Notes

> When capturing references for this style, look for:
> - The glass (must be frosted/translucent — backdrop blur over visible video or imagery)
> - The border (must show the liquid-glass edge refraction gradient, not a flat stroke)
> - The ground (must be near-black or dark video — no light backgrounds)
> - The lighting (must be noir/cinematic — moody, directional, not flat)
> - The motion (must be slow, fluid, choreographed — not snappy)
> - The text (must be clean geometric sans, medium weights, readable on frosted glass)
> - The overall mood (must feel premium, spatial, darkly elegant)

AI Prompts

EXACT REPLICA3678 charactersTested with: cursor, v0

```
Build a dark glassmorphic landing page for "AETHER" — a spatial computing platform. Stack: React + Vite + TypeScript + Tailwind CSS v4 + lucide-react + framer-motion. Page title: `Aether — Spatial Computing Platform`.

Vibe: Frosted glass panels floating over dark ambient video. Liquid-glass edge refraction. Spring-physics hover. Premium, spatial, cinematic.

## ANTI-SLOP CONSTRAINTS
- NO opaque glass backgrounds
- NO backdrop-blur > 40px
- NO drop shadows on glass
- NO colored glass tinting
- NO more than ONE accent
- NO busy video backgrounds

## FONTS
Load: Inter Tight (400/500/600) via Google Fonts.
- `.font-display { font-family: 'Inter Tight'; font-weight: 600; letter-spacing: -0.02em; }`
- `.font-body { font-family: 'Inter Tight'; font-weight: 400; }`

## COLOR SYSTEM
```css
:root {
  --ground: #050505;
  --glass-bg: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.1);
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,0.7);
  --accent: rgba(100,180,255,0.8);
}
```

## LIQUID GLASS CSS (place in global CSS)
```css
.liquid-glass {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.3) 0%,
    rgba(255,255,255,0.05) 30%,
    rgba(255,255,255,0) 50%,
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,0.05) 90%,
    rgba(255,255,255,0.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
```

## PAGE STRUCTURE

### Background Video
- Full-bleed, absolute, z-0
- URL: [dark ambient abstract video — slow, no text, no faces]
- autoPlay loop muted playsInline
- Overlay: `bg-gradient-to-b from-black/30 via-transparent to-black/60`

### Floating Nav
- `fixed top-6 left-1/2 -translate-x-1/2 z-50`
- liquid-glass class, rounded-2xl, px-6 py-3
- Flex gap-8: Logo "AETHER" + links (Product, Docs, Pricing) + CTA button
- CTA: bg-white/10, rounded-lg, px-4 py-2, text-sm

### Hero
- `min-h-[100dvh] flex items-center justify-center`, relative, z-10
- Glass card (liquid-glass): max-w-2xl, p-12, text-center
- Headline: `.font-display`, `clamp(2rem, 5vw, 4rem)`: `Compute in` / `a new dimension`
- Subtext: `.font-body`, `var(--body)`, `--text-secondary`: `Aether brings spatial computing to every device. Build immersive experiences without the complexity.`
- CTA row: Primary (bg-white text-black rounded-lg px-8 py-3) + Secondary (liquid-glass, rounded-lg, px-8 py-3)

### Feature Cards
- Grid: `grid-cols-3 gap-4`, max-w-6xl, centered, padding `clamp(4rem, 10vh, 8rem)` vertical
- Each card: liquid-glass, p-8
- Icon (lucide, size 24, color white/80) + title + body text
- Hover: translateY(-4px) + scale(1.01), spring 300ms

### CTA Section
- Centered glass card, similar to hero but smaller
- Headline: `Ready to build spatially?`
- CTA: `Get started`

## ANIMATIONS
- Glass panels: `initial={{ opacity: 0, y: 16, scale: 0.98 }}` → `animate={{ opacity: 1, y: 0, scale: 1 }}`, 800ms, ease [0.22, 1, 0.36, 1], stagger 0.08s
- Hover: `whileHover={{ y: -4, scale: 1.01 }}`, transition: spring (stiffness: 300, damping: 25)
- Video: fade-in 1500ms ease-out

## ICONS
lucide-react: `Box`, `Layers`, `Globe`, `ArrowRight`. Size 24, strokeWidth 1.5.

Recreate with exact liquid-glass CSS, spring hover, and staggered glass panel entrances.
```

This prompt recreates a specific design pixel-faithfully. Study it to understand the style at its purest.