# Liquid Glass Aesthetic

Reference style for premium tech product videos and UI animations. Inspired by Google Labs Flow, Apple Vision Pro, and modern glass morphism.

## Two Primary Modes

### 1. Liquid Glass Background Mode
**When:** Abstract backgrounds, transitions, atmospheric effects

**Visual characteristics:**
- Deep sapphire blue base (#0d1b3e → #1a237e)
- Flowing organic shapes — swirls, waves, mercury-like motion
- Iridescent highlights — purple, teal, silver catching light
- Caustic light patterns (like light through water)
- High contrast between dark depths and bright reflections

**Animation:**
- Slow, hypnotic movement (0.5-2s per cycle)
- Fluid dynamics — elements flow into each other
- Subtle color shifts through iridescent spectrum

**Remotion implementation:**
```tsx
// Animated gradient background
<AbsoluteFill style={{
  background: 'linear-gradient(135deg, #0d1b3e 0%, #1a237e 50%, #0d47a1 100%)',
}}>
  {/* Overlay with animated SVG filter for liquid effect */}
  <svg style={{ position: 'absolute', width: '100%', height: '100%' }}>
    <filter id="liquid">
      <feTurbulence baseFrequency="0.01" numOctaves="3" seed={frame} />
      <feDisplacementMap in="SourceGraphic" scale="50" />
    </filter>
  </svg>
</AbsoluteFill>
```

### 2. Warm Gradient + Glass UI Mode
**When:** Product showcases, UI demos, content with floating elements

**Visual characteristics:**
- Warm gradient backgrounds — peach (#ffccbc) → coral (#ff8a65) → amber (#ffab40)
- Frosted glass panels over the gradient
- Dark glass UI elements (rgba(0,0,0,0.5-0.7) with blur)
- Soft, diffused lighting — no harsh shadows

**Glass morphism panel:**
```tsx
const GlassPanel = ({ children }: { children: React.ReactNode }) => (
  <div style={{
    background: 'rgba(0, 0, 0, 0.6)',
    backdropFilter: 'blur(20px)',
    WebkitBackdropFilter: 'blur(20px)',
    borderRadius: 24,
    border: '1px solid rgba(255, 255, 255, 0.1)',
    padding: 24,
    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
  }}>
    {children}
  </div>
);
```

## 3D Product Integration

When floating 3D products in the scene:
- Use dramatic angles — slightly below, looking up at product
- Strong depth of field — sharp product, soft background  
- Products should feel weightless, gently floating
- Subtle rotation/bobbing animation (spring physics)
- Rim lighting to separate from background

```tsx
// Floating product with gentle bob
const yOffset = interpolate(
  Math.sin(frame / 30),
  [-1, 1],
  [-10, 10],
);

<Img 
  src={productImage}
  style={{
    transform: `translateY(${yOffset}px) rotateY(${frame * 0.5}deg)`,
    filter: 'drop-shadow(0 20px 40px rgba(0,0,0,0.4))',
  }}
/>
```

## Typography in Glass Context

- White or light gray text on dark glass
- Dark text on light/frosted panels
- Inter, SF Pro, or geometric sans-serif fonts
- Medium to bold weights for headlines
- Generous letter-spacing on labels
- Text should have subtle shadow for depth

## Color Palette Reference

**Cool (Liquid Glass):**
| Name | Hex | Usage |
|------|-----|-------|
| Deep Navy | #0d1b3e | Background base |
| Sapphire | #1a237e | Gradient mid |
| Azure | #0d47a1 | Gradient highlight |
| Iridescent Purple | #7c4dff | Accent |
| Iridescent Teal | #00bcd4 | Accent |
| Silver | #e0e0e0 | Highlights |

**Warm (Glass UI):**
| Name | Hex | Usage |
|------|-----|-------|
| Peach | #ffccbc | Background start |
| Coral | #ff8a65 | Background mid |
| Amber | #ffab40 | Background end |
| Dark Glass | rgba(0,0,0,0.6) | UI panels |
| Frosted Border | rgba(255,255,255,0.1) | Panel edges |

## Animation Principles

1. **Fluid motion** — Use spring animations, not linear
2. **Layered depth** — Multiple planes moving at different speeds (parallax)
3. **Organic shapes** — Rounded corners, blob-like forms
4. **Subtle always-on motion** — Nothing completely static
5. **Seamless loops** — Background should loop without visible cuts

## SORA Prompt Examples

For generating liquid glass backgrounds:
```
Abstract liquid glass texture flowing slowly, deep blue and purple 
iridescent swirls, mercury-like reflections, smooth caustic lighting,
seamless loop, 4K, cinematic
```

For warm gradient scenes:
```
Soft warm gradient background, peach to coral to amber, subtle 
animated light rays, dreamy bokeh, gentle motion, product showcase 
lighting, 4K
```

---

*Reference: Tim's taste profile — Google Labs Flow, Apple glass morphism, premium tech aesthetic*
