/cinematic-scrub-landing

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.

Why this skill exists

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:

| Beat | Type | Reference | |---|---|---| | 1 — Longing | **Hero** (mouse-scrub video) |  | | 2 — Joy | **Sun** — bright primary-accent gradient, floating motif SVGs, giant ghost typography, stat cards |  | | 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 |  | | 5 — Action | **Signal** — full-bleed strong accent (red/orange/green), massive headline + CTA, glass-contained panel |  |

For technical/SaaS brands, swap section types as needed (see the section library below) — but always end with a Signal section.

---

How to use this skill

1. **Drop assets** into a clean working directory:

• Hero video (any container — `.mp4`, `.mov`, `.webm`)
• Logo (SVG strongly preferred; PNG with transparency acceptable)
• 1-3 product/subject images (JPG/PNG, transparent ideal)

2. **Confirm with the user (briefly — propose defaults, move on):**

• Product name + meta-tagline
• Language code (drives RTL/LTR + font choice)
• Brand context — era, audience, emotional core, palette feel
• Optional: explicit palette hexes, narrative arc beats

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.

---

INPUTS — collect these from the user

PRODUCT_NAME: "<e.g. במבה / Bamba / Hope the Cheetah / Acme CRM>"
TAGLINE: "<the meta-message — e.g. 'it's not a snack, it's lifelong memories'>"
LANGUAGE: "<he | en | ar | es | fr | ja | ...>"
IS_RTL: "<true | false>"                                   # he/ar/fa = true; everything else = false
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 l