innovation

What this skill does

# 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.