Cinematic Video Hero

Cinematic Video Hero

A style pack for building premium landing pages built around a fullscreen looping background video. This skill produces a runnable React + Vite + TypeScript + Tailwind project (single App.tsx) with a shared liquid-glass design system and Framer Motion animations.

The look: a raw, undimmed background video fills the viewport; all UI floats on top in translucent "liquid glass" chrome; headings use an elegant italic serif, everything else a clean grotesk sans; content enters with soft blur/rise animations. Think aerospace-launch, luxury-studio, mindfulness-app landing pages.

Before you build

1. Read the companion design skill. Also open /mnt/skills/public/frontend-design/SKILL.md for this environment's styling constraints (Tailwind utility limits, no browser storage, etc.). This skill defines the aesthetic; that one defines the guardrails.
2. Collect the content. You need the slots in the table below. If the user didn't give them, ask once for the essentials (brand name + one-line pitch + background video), and invent tasteful defaults for the rest rather than stalling. The background video is the centerpiece — if the user has no URL, ask for one; only if they insist on none, fall back to a dark animated CSS gradient and tell them it's a placeholder.

Tech stack (pin these)

• Vite + React 18 + TypeScript
• Tailwind CSS 3
• framer-motion — all entrance animations
• lucide-react — icons (ArrowUpRight, Play, Crown, Menu, X, etc.)

Everything lives in one App.tsx. No routing. Fonts load in index.html; the design system lives in index.css; tokens register in tailwind.config.js.

Build workflow

Follow this order — it prevents the most common breakages (fonts not applied, Tailwind tokens missing, video not covering).

1. Scaffold a Vite React-TS project and add the deps:

   npm create vite@latest site -- --template react-ts
   cd site && npm i && npm i framer-motion lucide-react
   npm i -D tailwindcss@3 postcss autoprefixer && npx tailwindcss init -p
   

2. Copy assets/index.html into the project root and swap in the fonts you picked (see the type pairings in references/design-system.md).
3. Copy assets/index.css into src/ — it holds the Tailwind directives, the global font rule, the .liquid-glass classes, and the keyframes.
4. Copy assets/tailwind.config.js and adjust fontFamily + colors to the chosen TONE.
5. Write src/App.tsx. Assemble the sections from references/section-recipes.md, using the components from references/components.md. Fill every slot from the table above.
6. Run npm run dev and verify against the Quality checklist below.

If the user wants an instant preview instead of a project, produce a single self-contained .html file using CDN Tailwind + the UMD React/Framer-Motion setup described in references/components.md (the FadingVideo section). The design system and components are identical — only the packaging changes.

Design system

The visual identity is fully specified in references/design-system.md: the exact .liquid-glass / .liquid-glass-strong CSS, the type pairings, the TONE palettes, and the hard rules (no dark overlay on the video by default; contrast comes from the glass chrome, not from dimming). Read it before writing any CSS — do not reinvent these values, they are tuned.

Animation components

Reusable components with full code live in references/components.md:

• FadeIn / animate-fade-rise — the default staggered entrance for hero elements (opacity + translateY, ~0.2s incremental delays).
• BlurText — headline that animates in word by word with a blur-to-sharp keyframe. The signature move for serif headlines.
• AnimatedHeading — headline that animates character by character (opacity
  • translateX stagger). Use for stark/mono tones.
• WordsPullUp — words slide up from y:20 on scroll into view; supports a superscript asterisk accent. Use for oversized display headings.
• FadingVideo — rAF-driven crossfade between multiple background videos (no CSS transition). Use only when the design switches between clips.

Pick one headline animation per page — mixing them reads as noise.

Section recipes

Assembly-ready layouts for each region are in references/section-recipes.md: the navbar (glass pill vs. bordered), the two hero layouts (centered vs. bottom-aligned 12-col grid), the stats row, the partners strip, and the mobile menu overlay. Compose the page as:

Nav  →  Hero (centered OR bottom-grid)  →  [Stats]  →  [Partners]

Most pages are a single h-screen section. Multi-section variants (hero + about + features) reuse the same primitives stacked with min-h-screen.

Responsive rules

Mobile-first, breakpoints at sm 640 / md 768 / lg 1024. Non-negotiables:

• The <video> is absolute inset-0 w-full h-full object-cover. Never let it letterbox.
• Desktop nav links + CTA show at md:; a hamburger + fullscreen overlay menu replace them below md.
• Headlines use clamp() or vw units so they scale smoothly, never a fixed px.
• Stat/CTA rows use flex-wrap so they never overflow on narrow screens.
• Secondary badges (award chips, partner strips) hide on the smallest screens (hidden sm:flex).

Quality checklist

Before delivering, confirm:

• Video autoplays: has autoPlay muted loop playsInline and object-cover.
• Global font actually applies (the * { font-family } rule is present and the Google Fonts <link> is in index.html).
• .liquid-glass renders as translucent glass, not a solid box (the ::before gradient border is present).
• Exactly one headline animation is used, and it fires on load / in-view.
• No dark overlay dims the video unless the user asked for one.
• Fully responsive: check 375px, 768px, 1280px. Hamburger works below md.
• All slots filled — no "Lorem ipsum", no leftover BRAND placeholder.

Adapting to other tones

This skill ships three palettes (navy-cinematic, warm-cream, stark-mono) in the design-system reference. Switching TONE swaps the color tokens and the headline animation but keeps the architecture. That is the intended way to reuse the layout without it feeling like the same page twice.