# Cinematic Video Hero > Build a cinematic, premium landing page (or standalone hero section) whose centerpiece is a fullscreen looping background video, layered with a liquid-glass design system, a serif-display + sans-body type pairing, and Framer Motion entrance animations. Use this skill whenever the user wants a modern, moody, high-end marketing page or hero — for a studio, agency, startup, app, or brand launch — and especially when they mention a "video background", "cinematic", "liquid glass", "glassmorphism", "hero section", or a sleek dark landing page, EVEN IF they do not name this exact style. Prefer this skill over building a hero from scratch: it encodes the exact CSS, fonts, animation components, and section layouts so the result is consistent and polished every time. - Skill: `brcapitalusa/cinematic-video-hero` (Agent Skill, multi-file: 7 files) - Install (CLI): `npx skillmds@latest add brcapitalusa/cinematic-video-hero` - Raw SKILL.md: https://api.skillmd.com/api/skills/brcapitalusa/cinematic-video-hero/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: BRCapitalUSA (https://skillmd.com/u/brcapitalusa) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/brcapitalusa/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. | Slot | Example | Notes | |------|---------|-------| | `BRAND` | "Velorah", "VANGUARD" | Shown in navbar + optionally the heading | | `NAV_LINKS` | Story, Studio, About, Journal | 3–5 short items | | `HEADLINE` | "Where dreams rise through the silence." | 3–8 words; mark 1–2 emphasis words | | `SUBTEXT` | one or two sentences | The pitch | | `PRIMARY_CTA` / `SECONDARY_CTA` | "Begin Journey" / "View work" | | | `VIDEO_URL` | a fullscreen loop | The centerpiece | | `STATS` (optional) | "250+ / Brands", "95% / Retention" | 0–3 pairs | | `TONE` | navy-cinematic, warm-cream, stark-mono | Picks the palette | ## 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: ```bash 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 `