Build a premium cinematic landing page with mouse-scrub video hero and brand-driven narrative-arc sections. Use whenever the user provides a hero video plus a product / subject / brand and wants a landing page, promo site, product showcase, marketing page, or storytelling site.
Installs just this skill. Get the whole plugin for auto-invocation.
โก How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/cinematic-scrub-landing
๐๏ธ Context preview
The summary Claude sees to decide when to auto-load this skill.
Build a premium cinematic landing page with mouse-scrub video hero and brand-driven narrative-arc sections. Use whenever the user provides a hero video plus a product / subject / brand and wants a landing page, promo site, product showcase, marketing page, or storytelling site.
---name: cinematic-scrub-landing
description: Build a premium cinematic landing page with mouse-scrub video hero and brand-driven narrative-arc sections. Use whenever the user provides a hero video plus a product / subject / brand and wants a landing page, promo site, product showcase, marketing page, or storytelling site. Works for any language (RTL or LTR โ Hebrew, English, Arabic, Spanish, French, Japanese, etc.) and any subject (food, tech, animals, fashion, services, SaaS, wildlife campaigns, music releases, books, real estate). The signature effect is mouse-driven video scrubbing โ the hero video lives across the entire page as a fixed backdrop, and moving the mouse left-right scrubs the video timeline so the subject responds to the cursor. Below the hero, 4-5 fully-opaque sections each carry their own brand identity (color, typography emphasis, layout pattern) and walk the viewer through a narrative arc (e.g. longing โ joy โ nostalgia โ contemplation โ action). Triggers on phrases like "build a landing page from this video", "cinematic landing page", "mouse scrub hero", "video that follows the cursor", "Apple-style premium product page", "the baby video scrub thing", "narrative landing page", "scrubable hero", "golden landing template", "make a promo site for this brand", "build me a showcase page with this clip". Do NOT use for parallax frame-scrub landings where the page itself doesn't scroll (use `parallax-landing-page` instead) or for video editing / captioning workflows (use `video-edit`).
---# Cinematic Scrub Landing Page โ The Golden Template
Build a premium, brand-aware landing page where the hero video responds to the mouse and the rest of the page walks the viewer through a 5-beat narrative arc. The user provides a video, optionally a logo + product photo + brand context โ this skill handles palette extraction, typography selection, RTL/LTR, scaffolding, the all-keyframes video re-encode, the mouse-scrub effect, the section library, and verification.
The reference implementation lives in <https://github.com/hoodini/bamba> โ an Israeli RTL site for the snack "ืืืื" where a baby video tracks the cursor across the whole page while 4 distinct sections below (bright yellow recipe, cream nostalgia album, dark contemplative pricing, red action finale) walk the viewer through *longing โ joy โ nostalgia โ contemplation โ action*.
Every rule in this skill was extracted from that build. The bullets in [the hard-rules section](#phase-8--hard-rules-priority-over-any-contradicting-best-practice) are ALL hard-won โ they override generic "good code" defaults.
---
## Section gallery (what you're building)
The hero stays on top. Below it, pick 4 sections from the library, ordered to follow the narrative arc. Each is fully opaque (no video bleed-through) and has its own brand identity:
| 3 โ Nostalgia | **Album** โ cream paper, dotted micro-pattern, polaroid bento with real product photo |  |
| 4 โ Contemplation | **Roast** โ dark with radial accent glows, three pricing cards each with DIFFERENT visual treatment |  |
3. **Execute the workflow below in order.** All phases are mandatory. Don't skip the ffmpeg re-encode โ that's the magic that makes scrub feel buttery.
4. **Verify before reporting done.** Phase 9 has 12 checks. Run all of them.
HERO_VIDEO_FILE: "<exact filename in cwd โ e.g. baby2.mp4>"
LOGO_FILE: "<exact filename โ leave blank if none>"
PRODUCT_IMAGE_FILE: "<exact filename โ leave blank if none>"
BRAND_CONTEXT: |
<2-4 sentences: era it evokes, who the audience is, the emotional core,
the visual identity (warm/cool/playful/serious). Drives palette + motifs.>
PALETTE: "<optional โ comma-separated hexes if overriding>"
NARRATIVE_ARC: "<optional โ 5 emotional beats; AI proposes if blank>"
```
The full text-template (with the same YAML block and prompt body) is in [`references/GOLDEN_PROMPT.md`](references/GOLDEN_PROMPT.md) โ paste it into Claude with the YAML filled in when you don't have direct skill-runtime access.
---
## Phase 0 โ Plan the design (output a โค200-word brief before coding)
Before writing any code, output:
1. **Extracted 5-color palette**: `background` (deepest ink), `cream` (warm off-white text โ NEVER `#FFFFFF`), `accent` (primary brand color), `accent2` (secondary brand color), `support` (tertiary tone). Extract from the logo + product image if no `PALETTE` was given. **The palette must be internally cohesive** โ all warm OR all cool, never mixed. Warm brands (food, nature, nostalgia, animals) โ no blues, teals, mints, cyans. Cool brands (tech, finance, medical, sci-fi) โ no warm tones except a tiny accent.
2. **Typography trinity** (display / body / handwritten-accent) for the language:
- `es` / `fr` / `it` / `de`: Anton or Bebas Neue (display) + Inter (body) + Caveat (accent)
- `ja`: Noto Sans JP weight 900 (display) + Noto Sans JP (body) + Yusei Magic (accent)
- Other: pick three Google Fonts matching the script, with the same `display-black / body-clean / handwritten-script` roles.
3. **Narrative arc** โ 5 emotional beats that map to `BRAND_CONTEXT`. Match each to a section type from the [section library](#phase-7--section-library-pick-4-5-after-the-hero).
Then execute โ do not ask for confirmation.
---
## Phase 1 โ Asset preparation (the magic step)
### 1a. Verify ffmpeg
```bash
which ffmpeg # or: Get-Command ffmpeg on PowerShell
```
If absent, stop and tell the user to install (`brew install ffmpeg` / Windows: <http://ffmpeg.org>).
### 1b. Re-encode the hero video with every frame as a keyframe
Browsers can only seek instantly to keyframes โ standard video has ~1 keyframe per 250 frames, which makes mouse-scrub stutter horribly. This single command is the difference between premium and amateur:
Verify the output: `hero.mp4` should be 5-50 MB. If > 50 MB re-run with `-crf 25`; if > 80 MB with `-crf 28`. Strip audio (`-an`) โ the hero is silent.
### 1c. Copy logo + product image
```bash
cp <LOGO_FILE> public/logo.<ext>
cp <PRODUCT_IMAGE_FILE> public/product.<ext> # if provided
```
---
## Phase 2 โ Scaffold
```bash
npm create vite@latest site -- --template react-ts
cd site
npm install
npm install lucide-react
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p
mkdir -p public
mv ../hero.mp4 public/hero.mp4
# Also move the logo + product image into public/
```
---
## Phase 3 โ Tailwind config
Replace `tailwind.config.js` entirely. Use the extracted palette and the language-appropriate fonts:
Replace entirely. Every utility below is load-bearing. Names assume the warm palette extracted earlier; for a cool brand swap "yellow"/"red" mentions in shadow tints for the actual accent colors.
Must include:
- `html { scroll-behavior: smooth; }` + `section[id] { scroll-margin-top: 90px; }` so anchored sections don't land under the fixed nav.
- `body` background = `background` color (fallback if video fails). Cursor = `crosshair`. Default font = body sans.
- `.ribbon` โ pricing/popular badge with `clip-path` triangle bottom, dark drop shadow.
- `.highlight-circle` โ hand-drawn-feel oval drawn via `::after`: rotated 3px accent-color border around an inline `<span>`. Use it around the single most important word in big headings (one per heading max).
- Decorative motif filter: `.peanut-svg` / `.<motif>-svg` with `drop-shadow`.
- Honor `prefers-reduced-motion: reduce` โ disable reveal animation + smooth scroll inside the media query.
---
## Phase 6 โ App.tsx architecture
Architecture is non-negotiable. Get it right the first time:
### 6a. Imports
```tsx
import { useEffect, useRef, useState } from 'react';
### 6b. Reusable components defined inside App.tsx
- `useReveal<T>()` โ IntersectionObserver hook returning a ref; adds `revealed` class on first intersect (threshold 0.15).
- `GlassCard` โ wrapper with the reveal hook, optional `strong` prop, accepts className.
- `Motif` โ a single decorative SVG component themed to `BRAND_CONTEXT` (peanut for food, paw for animals, circuit for tech, leaf for nature, droplet for beverage, bolt for energy). Floats at low opacity in 3-6 places per dark/bright section.
- `ScrollToTopButton` โ fixed `bottom-6 left-6` in RTL / `bottom-6 right-6` in LTR. Appears when `window.scrollY > window.innerHeight * 0.6`. Smooth scrolls to top. Short language-appropriate label ("ืืจืืฉ" / "Top" / "ุฃุนูู" / "Inicio").
The `isSeeking` guard is **critical** โ without it, mousemove fires faster than the browser can decode and you get seek-queue overflow + visible stutter.
Wire `onClick={() => scrollToSection(target)}` on every nav item. The CTA button in the nav also calls `scrollToSection('contact')` (or whatever the final beat's id is).
### 6e. Root JSX layout โ THE Z-INDEX TRAP (do not violate)
```tsx
return (
<div className="relative"> {/* NO bg-* class on this wrapper */}
**The outer `<div>` MUST NOT have a background color.** Any `bg-background` / `bg-cream` / `bg-white` on the wrapper paints over the `-z-20` video and the hero scrub stops working. Only `body` has `bg-background` as a fallback. This was the #1 mistake in the reference build. Catch it before you ship.
---
## Phase 7 โ Section library (pick 4-5 after the hero)
The hero is section 1. Then pick 4 more from this library, ordered to follow `NARRATIVE_ARC`. **Do not repeat the same pattern twice.** Each section is fully opaque with its own background โ the video bleeds through the hero only.
### Type A โ "Sun" (bright primary accent)
Big primary-color gradient background. Floating motif SVGs at low opacity. Giant faded ghost number/word in a corner (e.g. founding year at 6% opacity, 260px). Headline panel: contrasting cream-tinted rounded card with strong shadow โ heading inside, accent script word at -2ยฐ rotation as eyebrow, big display-black headline ending in a `.highlight-circle` word. **Real product photo** floats tilted next to the heading (6ยฐ, drop-shadow), hover-untwists. Three stat cards below in a row, each cream-rounded-[28px] with different slight rotations (-1.5ยฐ, 0.8ยฐ, -0.6ยฐ), each containing a massive display-black accent2 numeral (88-110px), a small label badge top-right, body text, footer attribution. Two large contrasting text panels at the bottom (one dark, one accent2-color) with thematic icons.
### Type B โ "Album" (cream nostalgia paper)
Cream paper background with subtle dotted micro-pattern (masked at edges). Giant faded handwritten word in `accent2` at 4-6% opacity in a corner. Headline panel: pure-white rounded card with shadow. Beside it, a quote card: dark background, accent-colored quote icon, font-accent (handwritten) testimonial, attribution underline, slight -2ยฐ rotation. Body: **polaroid bento grid** โ one large featured polaroid (`md:col-span-2 md:row-span-2`, -1.5ยฐ rotation) containing the `PRODUCT_IMAGE` inside a gradient frame with motif corner-tucks and a tag badge, plus 4 smaller polaroids each with a thematic icon-on-gradient image area, all with yellow/accent tape, all with handwritten captions, slightly different rotations.
### Type C โ "Roast" (dark contemplation)
Dark background with radial accent + accent2 glows in opposite corners, plus the masked grid texture. Floating motif SVGs at very low opacity. Headline panel: `liquid-glass-strong` rounded panel with accent-glow heading. Side label: `glass-pill` with thematic icon + one-line phrase. Body: **three pricing cards with three DIFFERENT visual treatments** (this variety is essential โ never three identical cards):
1. **Light card** โ cream paper with accent border, peanut-brown dark text, dashed-stamp badge top-right, classic price numeral, dark CTA button.
2. **Highlighted card** โ accent-color gradient background, slightly larger (negative margin top to lift), `.ribbon` at top-right, accent2 huge price numeral, accent2 CTA with intense glow.
3. **Dark card** โ dark with accent2 trim, accent2 numeral with glow, motif icon, `cta-primary` button.
### Type D โ "Signal" (the final action)
Full-bleed strong accent color (red, orange, green โ whatever the brand's "go" color is) with two large blurred orbs of accent2 in opposite corners and a giant centered accent2 oval blur behind the text. Floating motif SVGs at ~30% opacity. A single contained panel (dark-translucent backdrop-blur with accent tint) holding: `.stamp` badge eyebrow at -2ยฐ, MASSIVE responsive headline (60โ148px) mixing display-black and a handwritten line in the middle, ending with a short final word. Subtitle below in 2 lines. Big primary CTA button (cream background, accent text) with a tiny pulsing dot indicator. Optional secondary outlined link. Logo flanked by horizontal dividers ("by <BRAND>") at the bottom.
### Type E โ "Workshop" / "Specs" (technical)
For tech / SaaS / B2B where one of the beats is "how it works". Dark background, alternating left/right two-column rows: a numbered eyebrow + heading + body on one side, a glass card with code/diagram/screenshot on the other. Strong vertical rhythm. Use in place of B or C when `BRAND_CONTEXT` is technical.
**Always end with Type D (Signal) so the final beat is action.** Even technical SaaS pages need this โ replace the warm finale with a cool one (deep blue or violet) but keep the structure.
---
## Phase 8 โ Hard rules (priority over any contradicting "best practice")
1. **No background color on the outer wrapper `<div>`.** Only `body` gets `bg-background`. Anything else hides the video.
2. **Hero video is `position: fixed; -z-index: 20`** โ re-encoded with `-g 1 -keyint_min 1`.
3. **Each non-hero section is fully opaque** with its own background class. Never use a partial scrim to "let the hero peek through" all sections โ that's monotony pretending to be art.
4. **Each section has its own visual identity.** Different background, different palette emphasis, different layout pattern. Five sections must not look like five variations of one card grid.
5. **The narrative arc drives section order.** Start with the emotion `BRAND_CONTEXT` establishes; end with action.
6. **Headlines stay readable on busy backgrounds.** Every floating text block (heading, quote, subtitle, cursor cue, badge) is wrapped in a panel โ `liquid-glass-strong` over dark sections, white/cream card over light sections, `glass-pill` for small cues. No text floats naked over busy textures.
7. **Headline max sizes**: hero โค 78px desktop (so the product/subject stays visible). Section headings โค 108px. Final CTA โค 148px (nothing else competes).
8. **Palette cohesion**: warm brand โ no cool tones except tiny accents; cool brand โ no warm tones except tiny accents. **Never use `#FFFFFF` for text** โ always use the project's `cream` value.
9. **Logo treatment**: use the logo file as-is. Don't invert, don't tint, don't crop, don't wrap in a competing colored box. Sizing: nav `h-9` / hero attribution `h-12` / final-CTA attribution `h-16` / mini-footer `h-6`.
10. **Real product photography wins over generated gradients.** If `PRODUCT_IMAGE_FILE` was provided, use it prominently โ featured polaroid AND hero side accent AND/OR one pricing card.
11. **Navbar is clickable and scroll-spy-able.** `{ label, target }` items, smooth-scroll to sections. `scroll-margin-top: 90px` on `section[id]` so they don't land under the nav.
12. **Scroll-to-top button** appears after 60% viewport scroll, fixed bottom-left in RTL / bottom-right in LTR, with a short language-appropriate label.
13. **RTL layout**: hero text panel bottom-RIGHT. Forward arrows = `ArrowLeft`. Cursor cue at bottom-LEFT. Mobile menu items right-aligned.
14. **LTR layout**: hero text panel bottom-LEFT. Forward arrows = `ArrowRight`. Cursor cue at bottom-RIGHT.
15. **Favicon is the logo**, set in `index.html` via `<link rel="icon" type="image/svg+xml" href="/logo.svg" />`. Add `apple-touch-icon` too.
16. **Decorative motif SVGs** โ design ONE in-file React component themed to `BRAND_CONTEXT` (peanut, paw, circuit, leaf, droplet, bolt, snowflake). Floats at low opacity in 3-6 instances per dark/bright section.
17. **Ghost typography**: at least one section gets a giant low-opacity (4-8%) word or number in a corner โ the founding year, a one-word emotion, the brand name. 200-300px, faint enough to feel like a watermark.
18. **Handwritten accent**: use the script font for the section eyebrow ("ืืืชืืื" / "the recipe" / "el origen") at -2ยฐ rotation in accent color above each heading. Also use it for the middle line of the final CTA headline to break the rhythm.
20. **Highlight-circle** the single most important word in each section headline โ hand-drawn-feel red oval. One per heading max.
21. **Pricing cards must look different.** Light / highlighted-accent / dark โ three distinct treatments. The highlight is bigger, has a ribbon, glows.
22. **Polaroid pattern** for nostalgic memory cards: white card, yellow/accent tape, slight rotation, handwritten caption, gradient image area, hover-un-rotates to 0ยฐ and lifts.
23. **CTAs use the brand CTA gradient + glow** (`cta-primary` class). Always with an arrow icon. Always with a tiny pulsing dot indicator if it's the primary primary action.
24. **Run `npx tsc --noEmit` after writing.** It must pass with zero output. Then `npm run dev` and verify the server starts cleanly. Don't claim done until both pass.
25. **Don't add features the user didn't ask for** โ no contact form, no email signup, no analytics, no cookie banner, no language switcher, no dark mode toggle. Ship the spec.
26. **All copy is in `LANGUAGE`.** No mixing English boilerplate into a Hebrew page or vice versa. The only allowed non-`LANGUAGE` text is the brand mark itself, CSS font family names, and TypeScript/React identifiers.
27. **No emojis in code or copy** unless the brand voice explicitly demands them.
28. **No comments in code** unless explaining a non-obvious WHY (e.g. the isSeeking guard).
---
## Phase 9 โ Run and verify
1. `npx tsc --noEmit` โ zero output.
2. `npm run dev` โ Vite reports `ready in <ms>` with no errors.
3. Open the local URL.
4. **Hero check** โ page loads, hero is visible, moving the mouse scrubs the video smoothly with no stutter. If the subject moves "backwards" relative to cursor and feels wrong, ask the user before flipping to `1 - (e.clientX / window.innerWidth)`.
5. **Section identity check** โ scrolling past the hero reveals 4 sections each with its OWN opaque background, none of which is the hero video bleeding through. If you can see the hero subject behind any later section, the outer wrapper has a `bg-` class โ find and remove it (hard rule #1).
6. **Navbar click test** โ click each nav item; smooth-scroll lands on the right section under (not covered by) the nav. CTA button in nav scrolls to the final action section.
7. **Scroll-to-top test** โ scroll past 60% viewport; the floating button appears bottom-left (RTL) or bottom-right (LTR). Click โ smooth scroll to top, button fades out.
8. **Logo check** โ favicon visible in tab, logo at correct sizes in nav / hero / final / mini-footer, no inverts or tints.
9. **Asset check** โ if a product image was provided, it appears at least once at significant size (featured polaroid or hero side accent), not just as a thumbnail.
10. **Responsive sanity** โ at 360px, 768px, 1280px, no horizontal scroll, no text overlap, nav collapses to hamburger below `md`.
11. **Reduced motion** โ set `prefers-reduced-motion: reduce` in devtools and reload. Scroll reveal should snap (no animation), smooth scroll should be instant.
12. If any check fails, **fix it before reporting done**. Do not leave it for the user.
Report the dev URL it printed, the palette + arc you chose, and the section types you used.
---
## Reference implementation
The Bamba (ืืืื) site at <https://github.com/hoodini/bamba> โ RTL Hebrew landing for an Israeli snack with all five sections, the mouse-scrub baby backdrop, clickable navbar, and real Osem brand assets. When something in this skill is ambiguous, that repo is ground truth.
The full text template (same content as this SKILL.md formatted for paste-into-Claude use) is in [`references/GOLDEN_PROMPT.md`](references/GOLDEN_PROMPT.md). Use it as a fallback when the skill runtime isn't available.
---
## When to use other skills instead
- **`parallax-landing-page`** โ scroll-driven, page itself locked, 5 text scenes crossfade as frames scrub. Use when the brief is "scroll scrubs the video and the page doesn't move".
- **`video-to-landing-page`** โ Apple-style sticky-hero where scroll progresses the video frame through evenly-spaced JPEG extracts. Single hero with sections below.
- **`video-edit`** โ captioning, transcript-based editing, social cuts. Not for landing pages.
- **`hyperframes`** โ building HTML video compositions (the inverse direction โ HTML โ MP4).
- **This skill (`cinematic-scrub-landing`)** โ mouse-driven scrub of a fixed full-page video backdrop, with a vertically-scrolling narrative arc of 4-5 opaque branded sections beneath. Pick this when the user wants the hero to **respond to the cursor** and the page below to **tell a story**.
