# Agency v4: Liquid glass cinematic
Dark, premium, single-page landing page for an AI-powered web design agency. Luxury editorial aesthetic with black backgrounds, white text, liquid glass (glassmorphism) effects, and cinematic video backgrounds.
## Fonts
- **Headings**: Instrument Serif (italic) via `font-heading`
- **Body**: Barlow (weights 300, 400, 500, 600) via `font-body`
## Color theme
Black page background with white text. Glassmorphism elements use translucent white with blur. No HSL tokens in the design panel; the glass effects are handled by utility classes.
## Liquid glass CSS
Two utility classes defined under `@layer components`:
### `.liquid-glass` (subtle)
Translucent white background (`rgba(255,255,255,0.01)`) with `backdrop-filter: blur(4px)`, an inset `box-shadow` for a soft inner glow, and a `::before` pseudo-element that creates a gradient border via the `mask-composite: exclude` trick (thin glowing border that fades in the middle).
### `.liquid-glass-strong` (prominent, used on CTA buttons)
Same technique with stronger `backdrop-filter: blur(50px)` and a more pronounced outer shadow. The `::before` gradient border is brighter.
## Assets and media URLs
| Asset | URL |
|---|---|
| Hero bg video (MP4) | `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4` |
| Start section video (HLS) | `https://stream.mux.com/9JXDljEVWYwWu01PUkAemafDugK89o01BR6zqJ3aS9u00A.m3u8` |
| Stats section video (HLS, desaturated) | `https://stream.mux.com/NcU3HlHeF7CUL86azTTzpy3Tlb00d6iF3BmCdFslMJYM.m3u8` |
| CTA/footer video (HLS) | `https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8` |
| Feature gif 1 | `https://motionsites.ai/assets/hero-finlytic-preview-CV9g0FHP.gif` |
| Feature gif 2 | `https://motionsites.ai/assets/hero-wealth-preview-B70idl_u.gif` |
## Section breakdown
### 1. Navbar (fixed, floating)
Fixed `top-4`, horizontal padding `px-8 lg:px-16`. Left: logo. Center (desktop): liquid-glass rounded-full pill with navigation links ("Home", "Services", "Work", "Process", "Pricing") and a solid white "Get started" button with `ArrowUpRight` icon.
### 2. Hero section
Relative container, fixed height `1000px`. Background video (`<video>` tag, CloudFront MP4, autoPlay/loop/muted/playsInline). Dark overlay `bg-black/5`. Bottom gradient fade `300px`. Content centered with `paddingTop: 150px`:
- **Badge pill**: liquid-glass rounded-full with inner white "New" badge + "Introducing AI-powered web design."
- **Heading** (BlurText): "The website your brand deserves" -- `text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic leading-[0.8] max-w-2xl`, animated word-by-word from bottom with blur
- **Subtext**: blur-in animation, delay 0.8s
- **CTA buttons**: "Get started" liquid-glass-strong + "Watch the film" text-only with Play icon
- **Partners bar**: "Trusted by the teams behind" pill, then 5 partner names (Stripe, Vercel, Linear, Notion, Figma) in `font-heading italic text-2xl md:text-3xl`
### 3. BlurText component
Splits text by words. Uses `IntersectionObserver` to trigger on scroll. Each word is a `motion.span` that animates from `blur(10px) opacity:0 y:50` to `blur(0px) opacity:1 y:0` with stagger.
### 4. Start section ("How it works")
Full-width with HLS video background. Top/bottom gradient fades (200px). Content: badge, heading ("You dream it. We ship it."), subtext, CTA.
### 5. Features chess (alternating rows)
Section header: "Capabilities" badge + "Pro features. Zero complexity." heading.
- Row 1 (text left, image right): "Designed to convert. Built to perform." + feature-1.gif
- Row 2 (text right, image left): "It gets smarter. Automatically." + feature-2.gif
### 6. Features grid ("Why us")
4-column grid. Each card: liquid-glass rounded-2xl with icon (Zap, Palette, BarChart3, Shield), title, description.
### 7. Stats section
HLS video background displayed with `filter: saturate(0)`. Liquid-glass card with 4 stats: "200+", "98%", "3.2x", "5 days".
### 8. Testimonials
3-column grid of liquid-glass cards with quotes, names, and roles.
### 9. CTA + footer
HLS video background. Heading: "Your next website starts here." Two buttons: "Book a call" glass + "View pricing" solid white. Footer bar with copyright and links.
## Animation patterns
1. **BlurText**: Word-by-word stagger from bottom with gaussian blur dissolve, IntersectionObserver triggered
2. **Hero subtext**: `filter: blur(10px)` to `blur(0px)`, opacity 0 to 1, y 20 to 0, delay 0.8s
3. **Hero CTA**: Same blur-in, delay 1.1s
4. **Video backgrounds**: autoPlay, loop, muted, playsInline with top/bottom black gradient fades
## Design patterns
- **Badge**: `liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body`
- **Section heading**: `text-4xl md:text-5xl lg:text-6xl font-heading italic text-white leading-[0.9]`
- **Body text**: `text-white/60` or `text-white/70`, `font-body font-light text-sm md:text-base`
- **Primary CTA**: `liquid-glass-strong rounded-full` with ArrowUpRight icon
- **Secondary CTA**: `bg-white text-black rounded-full`
- **Card**: `liquid-glass rounded-2xl`
- **Video fades**: `linear-gradient(to bottom/top, black, transparent)` with `pointer-events-none`