---
name: liquid-glass-agency
description: "Use this plugin when the user wants a dark, luxury single-page landing for an AI web-design agency: cinematic video backgrounds, editorial Instrument Serif italic headings, liquid-glass (glassmorphism) cards and CTAs, BlurText word-by-word reveals, and section-by-section storytelling. Invoke for 'liquid glass agency', 'glass landing page', 'AI agency site', or when the user references the Liquid Glass Agency template."
version: 0.1.0
od:
  mode: prototype
  surface: web
  scenario: design
  preview:
    type: html
    entry: example.html
  design_system:
    requires: false
---

# Liquid Glass Agency — Cinematic AI Web-Design Landing

Produce a dark, premium, single-page landing page for an AI-powered web-design agency with a luxury editorial aesthetic: black backgrounds, white text, **liquid glass (glassmorphism)** effects, and cinematic video backgrounds. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and data; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, glass utilities, section layout, video wiring, and reveal animations described below.

This is the authoritative build brief. Follow it exactly — the named CSS variables, fonts, media URLs, and animation patterns are locked.

**Assets (critical):** `example.html` ships the logo, hero poster, and the two feature-preview images as **inlined `data:image/svg+xml;base64,…` URIs** — keep those exactly as they are when you copy the seed. The large **CloudFront `.mp4`** background video and the **Mux HLS `.m3u8`** section videos are intentionally kept as **remote CDN URLs** — do not inline multi-MB video. Do NOT swap any inlined data URI for a remote avatar/image host (`i.pravatar.cc`, `api.dicebear.com`, `figma.site`, etc.): remote image hosts rate-limit / 403 inside the preview sandbox and render broken. Only replace an inlined asset if the user supplies a real image, and prefer a data URI.

## Stack

- Default output: the single self-contained `example.html` seed (vanilla HTML/CSS/JS). It already includes everything inline.
- If the user explicitly asks for a React + Vite + Tailwind + shadcn/ui + Framer Motion (`motion/react`) project, port the seed faithfully: same tokens, same section structure, `lucide-react` for icons, Instrument Serif + Barlow from Google Fonts. Do not change the design while porting. Key deps for the React port: `motion ^12.35.0`, `hls.js ^1.6.15` (for the Mux HLS section videos), `lucide-react ^0.462.0`, `react-router-dom ^6.30.1`.
- **Motion loading (locked).** If you emit a single self-contained inline-JSX file instead of the Vite project, Motion's React hooks (`useScroll`, `useTransform`, `useAnimationFrame`, …) exist only in the **React** UMD build: load `<script src="https://unpkg.com/framer-motion@11.11.13/dist/framer-motion.js"></script>` and read them off `window.Motion` — never the vanilla `https://unpkg.com/motion@.../dist/motion.js` DOM bundle, which lacks `useScroll` and renders a blank page. (The Vite project imports from npm and is unaffected.)

## Fonts

Load from Google Fonts:
`https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap`

- Headings: **Instrument Serif, italic** → `.font-heading` (`font-family:'Instrument Serif',serif; font-style:italic`).
- Body: **Barlow** (weights 300, 400, 500, 600) → `.font-body`. Body default weight is 300.

In a Tailwind port, extend `fontFamily`: `heading: ["'Instrument Serif'","serif"]`, `body: ["'Barlow'","sans-serif"]`.

## Color Theme — locked (CSS custom properties, HSL triplets)

```
:root {
  --background: 213 45% 67%;
  --foreground: 0 0% 100%;
  --card: 213 45% 62%;
  --card-foreground: 0 0% 100%;
  --primary: 0 0% 100%;
  --primary-foreground: 213 45% 67%;
  --secondary: 213 45% 72%;
  --secondary-foreground: 0 0% 100%;
  --muted: 213 35% 60%;
  --muted-foreground: 0 0% 100% / 0.7;
  --accent: 213 45% 72%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --border: 0 0% 100% / 0.2;
  --input: 0 0% 100% / 0.2;
  --ring: 0 0% 100% / 0.3;
  --radius: 9999px;
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  --glass-blur: 16px;
}
```

The page `body` background is **pure black `#000`**; the desaturated-blue `--background` triplet shows through the cinematic video and glass surfaces. White text everywhere; muted text uses `rgba(255,255,255,0.6)` / `0.7`. `--radius: 9999px` ⇒ pills/round buttons by default.

## Liquid Glass CSS (the core visual effect) — locked

Two utility classes, defined under `@layer components` in a Tailwind build (inline `<style>` in the seed):

- `.liquid-glass` (subtle): `background: rgba(255,255,255,0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); border:none; box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); position:relative; overflow:hidden;`
- `.liquid-glass-strong` (prominent, for CTA buttons): same recipe but `backdrop-filter: blur(50px)` and `box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15);`

Both get a `::before` pseudo-element that paints a **thin glowing gradient border** via the `mask-composite` trick: `inset:0; border-radius:inherit; padding:1.4px;` with a vertical `linear-gradient(180deg, …)` that is bright (`rgba(255,255,255,0.45/0.5)`) at top and bottom and transparent in the middle, masked with `-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;`. Keep these recipes byte-for-byte.

## Assets & Media URLs — locked

- Hero background video (CloudFront MP4, kept remote): `https://plugin-assets.open-design.ai/plugins/liquid-glass-agency/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8-b7258e.mp4`
- Hero poster: inlined `data:image/svg+xml` in the seed (desaturated-blue atmospheric still). In a fuller React build the original was `/images/hero_bg.jpeg`.
- StartSection video (Mux HLS): `https://stream.mux.com/9JXDljEVWYwWu01PUkAemafDugK89o01BR6zqJ3aS9u00A.m3u8`
- Stats section video (Mux HLS, rendered **desaturated** `filter: saturate(0)`): `https://stream.mux.com/NcU3HlHeF7CUL86azTTzpy3Tlb00d6iF3BmCdFslMJYM.m3u8`
- CTA/Footer video (Mux HLS): `https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8`
- Feature GIFs (originals): `https://plugin-assets.open-design.ai/plugins/liquid-glass-agency/hero-finlytic-preview-CV9g0FHP-9d3cb6.gif` (row 1, right) and `https://plugin-assets.open-design.ai/plugins/liquid-glass-agency/hero-wealth-preview-B70idl_u-7969db.gif` (row 2, left). The seed ships inlined SVG mock previews in their place so the card never breaks; you may use the GIF URLs in a React port.
- Logo icon: inlined SVG data URI in the seed (`h-12 w-12` ⇒ 48×48).

**Note for the vanilla seed:** HLS `.m3u8` cannot play in `<video>` without `hls.js`. To keep the seed self-contained and dependency-free, every video-background section reuses the CloudFront MP4 (which plays natively) as a stand-in. In a React port, wire each section's Mux HLS URL through `hls.js`.

All video backgrounds: `autoPlay loop muted playsInline`, `object-fit: cover`, with **top + bottom black gradient fades** (`linear-gradient(to bottom/top, #000, transparent)`, ~200px each; hero bottom fade is 300px), `pointer-events: none`.

## Section-by-section layout

### Navbar (fixed, floating)
`position: fixed; top:16px; left:0; right:0; z-index:50; padding: 12px 32px` (lg `px-16`). Left: logo image (48×48). Center (desktop only, `hidden md:flex`): a `liquid-glass rounded-full` pill (`px-1.5 py-1`) of links **Home, Services, Work, Process, Pricing**, each `px-3 py-2 text-sm font-medium text-foreground/90`; last item is a solid white "Get Started" button (`bg-white text-black rounded-full px-3.5 py-1.5 text-sm`) with a lucide `ArrowUpRight` icon. Hide the pill below ~900px.

### Hero
`relative; height: 1000px; overflow: visible`. Background `<video>` absolutely positioned `left-0 w-full h-auto object-contain z-0` with `top: 20%`, CloudFront MP4 source, poster = inlined still. Dark overlay `absolute inset-0 bg-black/5 z-0`. Bottom gradient fade 300px (`to bottom, transparent, #000`). Content (`z-10`, centered, `paddingTop: 150px`):
- Badge pill: `liquid-glass rounded-full px-1 py-1` with inner white "New" badge (`bg-white text-black rounded-full px-3 py-1 text-xs font-semibold`) + text "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 tracking-[-4px]`, animated word-by-word from bottom with blur, 100ms stagger.
- Subtext (`motion.p`): "Stunning design. Blazing performance. Built by AI, refined by experts. This is web design, wildly reimagined." — blur-in, `text-sm md:text-base text-white font-light`.
- CTAs: "Get Started" (`liquid-glass-strong rounded-full px-5 py-2.5` + `ArrowUpRight`) and "Watch the Film" (text-only with filled `Play`).
- Partners bar (`mt-auto pb-8 pt-16`): a `liquid-glass` pill "Trusted by the teams behind", then 5 partner names in `text-2xl md:text-3xl font-heading italic text-white`, `gap-12 md:gap-16`: **Stripe, Vercel, Linear, Notion, Figma**.

### Start ("How It Works")
Full-width video-background section (StartSection Mux HLS). Content centered, `minHeight: 500px`: badge "How It Works" (`liquid-glass rounded-full px-3.5 py-1`); heading "You dream it. We ship it." (`text-4xl md:text-5xl lg:text-6xl font-heading italic tracking-tight leading-[0.9]`); subtext "Share your vision. Our AI handles the rest—wireframes, design, code, launch. All in days, not quarters." (`text-white/60 font-light`); CTA "Get Started" (`liquid-glass-strong rounded-full px-6 py-3`).

### Features Chess (alternating rows)
Header: "Capabilities" badge + "Pro features. Zero complexity." heading. Row 1 (content left / image right): title "Designed to convert. Built to perform.", body "Every pixel is intentional. Our AI studies what works across thousands of top sites—then builds yours to outperform them all.", button "Learn more" (`liquid-glass-strong`), media = feature-1 GIF inside `liquid-glass rounded-2xl overflow-hidden`. Row 2 (`flex-row-reverse`, content right / image left): title "It gets smarter. Automatically.", body "Your site evolves on its own. AI monitors every click, scroll, and conversion—then optimizes in real time. No manual updates. Ever.", button "See how it works", media = feature-2 GIF in `liquid-glass rounded-2xl`.

### Features Grid ("Why Us")
Header: "Why Us" badge + "The difference is everything." heading. 4-column grid (`grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6`), each card `liquid-glass rounded-2xl p-6` with a lucide icon in a `liquid-glass-strong rounded-full w-10 h-10` circle:
- `Zap` — "Days, Not Months" — "Concept to launch at a pace that redefines fast. Because waiting isn't a strategy."
- `Palette` — "Obsessively Crafted" — "Every detail considered. Every element refined. Design so precise, it feels inevitable."
- `BarChart3` — "Built to Convert" — "Layouts informed by data. Decisions backed by performance. Results you can measure."
- `Shield` — "Secure by Default" — "Enterprise-grade protection comes standard. SSL, DDoS mitigation, compliance. All included."

### Stats
Video-background section (Stats Mux HLS, **`filter: saturate(0)`** desaturated B&W). Content: a `liquid-glass rounded-3xl p-12 md:p-16` card with a 4-column grid; values `text-4xl md:text-5xl lg:text-6xl font-heading italic`, labels `text-white/60 font-light text-sm`:
- "200+" / "Sites launched"
- "98%" / "Client satisfaction"
- "3.2x" / "More conversions"
- "5 days" / "Average delivery"

### Testimonials
Header: "What They Say" badge + "Don't take our word for it." heading. 3-column grid (`md:grid-cols-3 gap-6`), each card `liquid-glass rounded-2xl p-8`; quote `text-white/80 font-light text-sm italic`, name `text-white font-medium text-sm`, role `text-white/50 font-light text-xs`:
- "A complete rebuild in five days. The result outperformed everything we'd spent months building before." — Sarah Chen, CEO, Luminary
- "Conversions up 4x. That's not a typo. The design just works differently when it's built on real data." — Marcus Webb, Head of Growth, Arcline
- "They didn't just design our site. They defined our brand. World-class doesn't begin to cover it." — Elena Voss, Brand Director, Helix

### CTA + Footer
Video-background section (CTA Mux HLS). Heading "Your next website starts here." (`text-5xl md:text-6xl lg:text-7xl font-heading italic leading-[0.85]`); subtext "Book a free strategy call. See what AI-powered design can do. No commitment, no pressure. Just possibilities."; buttons "Book a Call" (`liquid-glass-strong rounded-full px-6 py-3`) and "View Pricing" (`bg-white text-black rounded-full px-6 py-3`). Footer bar (`mt-32 pt-8 border-t border-white/10`): left "© 2026 Studio. All rights reserved." (`text-white/40 text-xs`); right "Privacy", "Terms", "Contact" links (`text-white/40 text-xs`).

## Overall page structure

```
<div bg-black>
  <Navbar/>           // fixed floating nav
  <Hero/>             // 1000px tall, CloudFront MP4 bg
  <div bg-black>
    <StartSection/>   // HLS video bg, "How It Works"
    <FeaturesChess/>  // alternating text/gif rows
    <FeaturesGrid/>   // 4-card grid
    <Stats/>          // HLS video bg (desaturated), stats card
    <Testimonials/>   // 3-card grid
    <CtaFooter/>      // HLS video bg, CTA + footer
  </div>
</div>
```

## Animations (map Framer-Motion down to vanilla in the seed)

- **BlurText (hero heading):** split text by words; each word is a span animating from `{filter:blur(10px), opacity:0, y:50}` → `{filter:blur(0), opacity:1, y:0}`, staggered ~100ms per word, triggered by `IntersectionObserver`. In the seed, `[data-blur]` is split into `.blur-word` spans toggled via IO; in React, `motion.span` keyframes.
- **Reveal (subtext, CTAs, badges, cards, headings):** `whileInView` → in the seed an `IntersectionObserver` adds `.in` to `.reveal` (from `{opacity:0, translateY(28px), blur(10px)}` to settled). Hero subtext delay ~0.8s, CTAs ~1.1s in the React original.
- All video backgrounds autoplay/loop/muted/playsInline with top+bottom black gradient fades.
- Respect `prefers-reduced-motion`: force reveals visible.

## Icons (lucide / lucide-react)

`ArrowUpRight`, `Play` (filled), `Zap`, `Palette`, `BarChart3`, `Shield`. In the vanilla seed these are inline SVGs; in a React port use `lucide-react`.

## Color Rules — hard

Dark editorial palette only: black `#000` page, white text, desaturated-blue glass tint via the locked `--background`/`--card` HSL triplets. Muted text = `white/60`–`/80`. **Do not introduce a saturated accent hue** (no purple/indigo/teal/green) — the luxury look comes from monochrome white-on-black + glass, not a colored accent. Keep `--radius: 9999px` (pill geometry) and the two liquid-glass recipes intact.