liquid-glass-agency

What this skill does

# 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/[email protected]/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-power