Innovation

---
name: innovation
description: "Use this plugin when the user wants a premium dark editorial landing page with an Instrument-Serif headline, liquid-glass nav/cards, a crossfading fullscreen hero video, and scroll-revealed about / featured-video / philosophy / services sections. Invoke for 'innovation landing', 'agency landing page', 'dark serif hero with glass', 'Asme template', or when the user references the Innovation / motionsites Innovation template."
version: 0.1.0
od:
  mode: prototype
  surface: web
  scenario: design
  preview:
    type: html
    entry: example.html
  design_system:
    requires: false
---

# Innovation — Dark Editorial Liquid-Glass Landing

Produce a premium single-page **agency / studio landing site**: bg-black, an Instrument-Serif hero headline over a seamlessly-looping fullscreen hero video, liquid-glass nav and buttons, and four scroll-revealed sections (About, Featured Video, Philosophy, Services). A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and swap video URLs; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact `.liquid-glass` treatment, fonts, layout, scroll reveals, and the hand-written hero-video crossfade loop described below.

This is the authoritative build brief. Follow it exactly — the named tokens, fonts, animations, and section structure are locked.

## Stack

- Default output: a single self-contained HTML file (the `example.html` seed). It already includes everything inline.
- If the user explicitly asks for a React + TypeScript + Vite + Tailwind project, port the seed faithfully: same tokens, same markup structure, `framer-motion` for `whileInView` reveals + `whileHover`/`whileTap`, `lucide-react` for icons, **Instrument Serif** (regular + italic) from Google Fonts. Do not change the design while porting.

## Fonts

- Load **Instrument Serif** (italic + regular) from Google Fonts:
  `@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');`
- Instrument Serif is used for: the hero `<h1>`, the "ideas"/"minds…" emphasis in About, the "Innovation x Vision" heading (with italic `x`), and the service-card titles. Body/UI copy stays in the system sans stack.

## Liquid Glass CSS (locked — used on every glass element)

```
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 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;
}
```

Apply `.liquid-glass` to: the nav pill, the Login button, the email-input pill, the manifesto button, the three social buttons, the "Our Approach" card, the Explore-more button, each service card, and the service-card arrow circles.

## Global

- `body { background:#000; color:#fff; overflow-x:hidden; }` — the entire page is black.
- Default UI ease: `cubic-bezier(0.23, 1, 0.32, 1)`. No `ease-in` on UI elements.

## Section 1 — Hero (full-viewport)

- `min-height:100vh; position:relative; overflow:hidden; display:flex; flex-direction:column`.
- **Background video** (`absolute inset-0 w-full h-full object-cover object-bottom`, `z-index:0`):
  `https://plugin-assets.open-design.ai/plugins/innovation/hf_20260405_074625_a81f018a-956b-43fb-9aee-4d1508e30e6a-6993b9.mp4`
  Attributes: `muted autoPlay playsInline preload="auto"`. **Starts at `opacity: 0`.**
- **Hero video fade logic (vanilla JS via refs, NOT CSS transitions):**
  - On `canplay`: play, then animate opacity 0 → 1 over **500ms** with `requestAnimationFrame`.
  - On `timeupdate`: when `duration - currentTime <= 0.55s`, animate opacity (current) → 0 over 500ms.
  - On `ended`: set opacity 0, wait 100ms, reset `currentTime = 0`, play again, fade back to 1 over 500ms.
  - Net effect: a seamless loop with a smooth crossfade to black between plays. Keep this exact behavior; the seed implements it in `<script>`.
- **Navbar** (`relative z-20 px-6 py-6`): a `.liquid-glass` rounded-full pill, `max-w-5xl mx-auto px-6 py-3`, flex space-between.
  - Left: Globe icon (24px, white) + "Asme" (white, font-semibold, text-lg). Hidden on mobile: nav links "Features", "Pricing", "About" (`text-white/80 hover:text-white text-sm font-medium`, gap-8, ml-8).
  - Right: "Sign Up" text button (white, text-sm) + "Login" `.liquid-glass` rounded-full px-6 py-2 button.
- **Hero content** (`relative z-10 flex-1 flex flex-col items-center justify-center px-6 py-12 text-center -translate-y-[20%]`):
  - Heading: `text-7xl md:text-8xl lg:text-9xl`, white, `tracking-tight whitespace-nowrap`, Instrument Serif. Text: `Know it then <em italic>all</em>.`
  - Email input: `max-w-xl w-full`. A `.liquid-glass` rounded-full pill `pl-6 pr-2 py-2 flex items-center gap-3`: transparent `<input>` placeholder "Enter your email" (`text-white placeholder:text-white/40`) + white circular submit button (`bg-white rounded-full p-3 text-black`) with an ArrowRight icon (20px).
  - Subtitle: `text-white text-sm leading-relaxed px-4` — "Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates."
  - Manifesto button: `.liquid-glass` rounded-full px-8 py-3 `text-white text-sm font-medium hover:bg-white/5`.
- **Social footer** (`relative z-10 flex justify-center gap-4 pb-12`): three `.liquid-glass` rounded-full `p-4` buttons — Instagram, Twitter, Globe icons (20px), `text-white/80 hover:text-white hover:bg-white/5`.

## Section 2 — About

- `bg-black pt-32 md:pt-44 pb-10 md:pb-14 px-6 overflow-hidden`.
- Subtle radial overlay: `radial-gradient(ellipse at top, rgba(255,255,255,0.03) 0%, transparent 70%)`.
- Label "About Us" — `text-white/40 text-sm tracking-widest uppercase`. Reveal: opacity 0 / y 20 → in, 0.6s.
- Heading `text-4xl md:text-6xl lg:text-7xl text-white leading-[1.1] tracking-tight`. Reveal: opacity 0 / y 40 → in, 0.8s, delay 0.1. Text:
  - "Pioneering " + *ideas* (Instrument Serif italic, `text-white/60`) + " for"
  - line break (hidden on mobile)
  - *minds that create, build, and inspire.* (Instrument Serif italic, `text-white/60`).

## Section 3 — Featured Video

- `bg-black pt-6 md:pt-10 pb-20 md:pb-32 px-6 overflow-hidden`, `max-w-6xl`.
- `rounded-3xl overflow-hidden aspect-video` container, reveal opacity 0 / y 60 → in, 0.9s.
- Video `w-full h-full object-cover`, `muted autoPlay loop playsInline preload="auto"`:
  `https://plugin-assets.open-design.ai/plugins/innovation/hf_20260402_054547_9875cfc5-155a-4229-8ec8-b7ba7125cbf8-eee511.mp4`
- Gradient overlay on video: `bg-gradient-to-t from-black/60 via-transparent to-transparent`.
- Bottom overlay (`absolute bottom-0 inset-x-0 p-6 md:p-10`): flex row on desktop, column on mobile.
  - Left: `.liquid-glass` rounded-2xl `p-6 md:p-8 max-w-md` card. Label "Our Approach" (`text-white/50 text-xs tracking-widest uppercase mb-3`) + body (`text-white text-sm md:text-base leading-relaxed`): "We believe in the power of curiosity-driven exploration. Every project starts with a question, and every answer opens a new door to innovation."
  - Right: "Explore more" button (`.liquid-glass` rounded-full px-8 py-3) with `whileHover scale 1.05` / `whileTap scale 0.95`.

## Section 4 — Philosophy (Innovation x Vision)

- `bg-black py-28 md:py-40 px-6 overflow-hidden`, `max-w-6xl`.
- Heading `text-5xl md:text-7xl lg:text-8xl text-white tracking-tight mb-16 md:mb-24`, reveal opacity 0 / y 40 → in, 0.8s. Text: "Innovation " + *x* (Instrument Serif italic, `text-white/40`) + " Vision".
- Two-column grid (`grid-cols-1 md:grid-cols-2 gap-8 md:gap-12`):
  - Left: video `rounded-3xl overflow-hidden aspect-[4/3]`, reveal from opacity 0 / x -40. `muted autoPlay loop playsInline preload="auto"`:
    `https://plugin-assets.open-design.ai/plugins/liquid-glass-agency/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8-b7258e.mp4`
  - Right: reveal from opacity 0 / x 40. Two text blocks split by a `w-full h-px bg-white/10` divider.
    - Block 1: label "Choose your space" (`text-white/40 text-xs tracking-widest uppercase mb-4`) + body (`text-white/70 text-base md:text-lg leading-relaxed`): "Every meaningful breakthrough begins at the intersection of disciplined strategy and remarkable creative vision. We operate at that crossroads, turning bold thinking into tangible outcomes that move people and reshape industries."
    - Block 2: label "Shape the future" + body: "We believe that the best work emerges when curiosity meets conviction. Our process is designed to uncover hidden opportunities and translate them into experiences that resonate long after the first impression."

## Section 5 — Services (What we do)

- `bg-black py-28 md:py-40 px-6 overflow-hidden`, `max-w-6xl`.
- Subtle radial: `radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, transparent 60%)`.
- Header row: flex space-between "What we do" (`text-3xl md:text-5xl text-white tracking-tight`) and "Our services" label (`text-white/40 text-sm`, hidden on mobile). Reveal opacity 0 / y 30 → in, 0.7s.
- Two-card grid (`grid-cols-1 md:grid-cols-2 gap-6 md:gap-8`):
  - Each card: `.liquid-glass` rounded-3xl `overflow-hidden`, `group`. Reveal opacity 0 / y 50 → in, 0.8s, **staggered by 0.15s** (use `data-delay` in the seed).
  - Media: `aspect-video object-cover transition-transform duration-700 group-hover:scale-105` + gradient `bg-gradient-to-t from-black/40 to-transparent`.
  - Body (`p-6 md:p-8`): tag (uppercase tracking-widest `text-white/40 text-xs`), ArrowUpRight icon in a `.liquid-glass` rounded-full `p-2` circle, title (`text-white text-xl md:text-2xl mb-3 tracking-tight`, Instrument Serif), description (`text-white/50 text-sm leading-relaxed`).
  - Card 1 — tag "Strategy", title "Research & Insight", desc "We dig deep into data, culture, and human behavior to surface the insights that drive meaningful, lasting change." Video:
    `https://plugin-assets.open-design.ai/plugins/innovation/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31-b2a357.mp4`
  - Card 2 — tag "Craft", title "Design & Execution", desc "From concept to launch, we obsess over every detail to deliver experiences that feel effortless and look extraordinary." Video:
    `https://plugin-assets.open-design.ai/plugins/innovation/hf_20260324_151826_c7218672-6e92-402c-9e45-f1e0f454bdc4-c2f128.mp4`

## Animations / Interactions

- **Hero video crossfade loop**: vanilla JS (canplay / timeupdate / ended) writing inline opacity over 500ms `requestAnimationFrame`. Not a CSS transition. See the seed `<script>`.
- **Scroll reveals** (framer-motion `useInView { once:true, margin:"-100px" }` → in vanilla, an `IntersectionObserver` with `rootMargin:"-100px 0px"` toggling an `.in` class). Variants: y-20/40/60, x-±40, all with the `0.23,1,0.32,1` ease. Service cards stagger 0.15s via `data-delay`.
- **Hover/tap**: Explore-more button scales 1.05/0.95; service-card video scales 1.05 on group hover (700ms).

## Assets

- All five videos are large stable CDN `.mp4` files on `d8j0ntlcm91z4.cloudfront.net` — **keep them as remote URLs**, do not inline. There are no avatars or small raster assets in this template, so nothing needs to be base64-inlined.
- Icons are inline SVG (Globe, ArrowRight, Instagram, Twitter, ArrowUpRight). When porting to React, swap them for the matching `lucide-react` components.

## Color Rules — hard

Monochrome: pure black `#000` background, white text at varying opacity (`/40`, `/50`, `/60`, `/70`, `/80`). No accent color, no purple/indigo/teal. The only "color" is the Instrument-Serif italic emphasis rendered in `text-white/40`–`/60`. Keep it strictly black-and-white editorial.

## Responsive

- ≤900px (md breakpoint): hide nav links, hero `<h1>` allowed to wrap (`white-space:normal`), philosophy + services grids collapse to one column, featured overlay stacks vertically, "Our services" label hidden.