Cinematic Scrub Landing

This one builds landing pages where the hero video scrubs forward and backward as you move your mouse left and right across the screen. It's the effect you've seen on Apple product pages and high-end brand sites where the subject seems to follow your cursor. Below the hero you get four or five opaque narrative sections, each with its own color palette and layout pattern, arranged to tell a story arc. The workflow handles palette extraction, RTL and LTR languages, typography selection for the script, and crucially, re-encodes your video with all keyframes so the scrubbing is instant instead of stuttery. The whole thing is modeled on a real Israeli snack brand site where a baby video tracked the mouse across bright yellow, cream, dark, and red sections. Works for any subject: food, tech, real estate, wildlife, music releases, SaaS products.

GitHub stars: 225
last updated: Jun 10, 2026

View on GitHub

Install

$ npx -y skills add hoodini/ai-agents-skills --skill cinematic-scrub-landing --agent claude-code

Installs into .claude/skills of the current project.

Files

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

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.

SKILL.md on GitHub

Details

Repository: github.com/hoodini/ai-agents-skills
Categories: Frontend Development, DevOps & CI/CD, Code Review & Quality, AI & Agent Building, Marketing & SEO, Design & UI/UX, Video & Audio Editing
First seen: Jun 11, 2026