hoodini/ai-agents-skills/cinematic-scrub-landing

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.

[Image: Hero with mouse-scrub video and glass headline panel]

Every rule in this skill was extracted from that build. The bullets in the hard-rules section 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:

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)

1. 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

1. 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.

1. 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` — 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.

1. 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.

1. Narrative arc — 5 emotional beats that map to BRAND_CONTEXT. Match each to a section type from the section library.

Then execute — do not ask for confirmation.

Phase 1 — Asset preparation (the magic step)

1a. Verify ffmpeg

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:

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

cp <LOGO_FILE>           public/logo.<ext>
cp <PRODUCT_IMAGE_FILE>  public/product.<ext>   # if provided

Phase 2 — Scaffold

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:

/** @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:

<!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" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="<Google Fonts URL for the three chosen fonts>" rel="stylesheet">
    <title><PRODUCT_NAME> — <TAGLINE></title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Phase 5 — index.css (the design system)

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.
• .liquid-glass / .liquid-glass-strong — backdrop-blur + saturate + inset-light border + masked gradient edge highlight. Strong variant uses an inset glow tinted with accent.
• .glass-pill — compact rounded pill with the same glass treatment for nav items and small badges.
• .cta-primary — brand CTA: linear-gradient(135deg, accent-light, accent, accent-shade) + accent-color glow shadow that intensifies on hover + translateY(-1px) lift.
• .brand-mark — small square/circle for tiny logo marks if no SVG is provided.
• .grid-bg — subtle 1px grid with radial fade-mask, used under dark sections.
• .reveal / .revealed — IntersectionObserver scroll-reveal: opacity 0 → 1 + translateY 28 → 0 over 0.9s with cubic-bezier(0.16, 1, 0.3, 1).
• .scrim-top / .scrim-bottom — gradient overlays for the hero only.
• Per-section backgrounds, named by feeling not color:
• .sun-section — bright primary-accent gradient + subtle dotted texture (the "joy / opening the bag" beat).
• .album-section — warm off-white paper, radial accent tints + dotted micro-pattern, edge-mask fade.
• .roast-section — dark with radial accent + accent2 glows in opposite corners + masked grid texture.
• .signal-section — full-bleed strong accent (often red/orange/green) for the action finale.
• .polaroid — white card, padding 14px 14px 44px 14px, soft layered shadow, hover lift to translateY(-6px) rotate(0). .polaroid-tape = yellow/accent tape strip absolutely positioned at top-center, rotated -4°, with dashed side hints.
• .stamp — dashed-border pill in accent color, uppercase, letter-spacing 0.18em.
• .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

import { useEffect, useRef, useState } from 'react';
import {
  Menu, X, ArrowLeft, ArrowRight, ArrowDown, ArrowUp, MousePointer2,
  // …plus 4-8 brand-thematic icons (Heart, Sparkles, Cookie, PawPrint, Cpu, Leaf, …)
} from 'lucide-react';

6b. Reusable components defined inside App.tsx