cinematic-scrub-landing

What this skill does

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

![Hero with mouse-scrub video and glass headline panel](assets/01-hero-mouse-scrub.png)

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) | ![hero](assets/01-hero-mouse-scrub.png) |
| 2 — Joy | **Sun** — bright primary-accent gradient, floating motif SVGs, giant ghost typography, stat cards | ![yellow](assets/02-yellow-recipe.png) |
| 3 — Nostalgia | **Album** — cream paper, dotted micro-pattern, polaroid bento with real product photo | ![cream](assets/03-cream-album.png) |
| 4 — Contemplation | **Roast** — dark with radial accent glows, three pricing cards each with DIFFERENT visual treatment | ![dark](assets/04-dark-pricing.png) |
| 5 — Action | **Signal** — full-bleed strong accent (red/orange/green), massive headline + CTA, glass-contained panel | ![red](assets/05-red-cta.png) |

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

```yaml
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 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:
   - `he`: Rubik (display) + Assistant (body) + Suez One (accent)
   - `en`: Anton (display) + Inter (body) + Caveat (accent)
   - `ar`: Cairo (display) + Tajawal (body) + Reem Kufi (accent)
   - `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:

```bash
ffmpeg -y -i <HERO_VIDEO_FILE> -g 1 -keyint_min 1 -c:v libx264 -preset slow -crf 20 -pix_fmt yuv420p -an hero.mp4
```

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:

```js
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        background: '<ink/dark>',
        cream:      '<warm off-white — NEVER #FFFFFF>',
        accent:     '<primary brand color>',
        accent2:    '<secondary>',
        support:    '<tertiary>',
      },
      fontFamily: {
        sans:    ['<body font>',         'system-ui', 'sans-serif'],
        display: ['<display font>',      'sans-serif'],
        accent:  ['"<handwritten font>"', 'cursive'],
      },
    },
  },
  plugins: [],
}
```

---

## Phase 4 — index.html

Replace entirely. Honor `IS_RTL`. Always include the favicon link pointing at the logo:

```html
<!DOCTYPE html>
<html lang="<LANGUAGE>" dir="<rtl|ltr>">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <link rel="apple-touch-icon" href="/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"