What is the cinematic-scrub-landing skill?
cinematic-scrub-landing is a skill from hoodini/ai-agents-skills. Give an AI coding agent a hero video and a brand, and it builds a React landing page where the cursor scrubs the video behind opaque story sections, after re-encoding the clip so every frame is a keyframe.
Most video backgrounds just loop. This skill makes the hero video respond to the cursor, so moving the mouse left to right scrubs the timeline. It is built around a reference site for an Israeli snack brand, rendered right to left.
The video stays fixed across the whole page. Below the hero, four or five fully opaque sections each carry their own brand identity and walk through an emotional arc, for example longing, joy, nostalgia, contemplation and action.
Why the video is re-encoded first
Browsers can only seek instantly to keyframes, and ordinary video has about one per 250 frames. The skill runs ffmpeg with -g 1 -keyint_min 1 so every frame is a keyframe, which is what keeps scrubbing smooth.
It checks the output is 5 to 50 MB, retries at a higher compression setting if the file is larger, and strips audio because the hero is silent.
What you give it and what you get back
- Inputs: product name, tagline, language code, whether the page is right to left, the hero video file, an optional logo and product image, and a short brand context.
- Output: a Vite, React and TypeScript project with Tailwind, built phase by phase from planning through scaffolding, config, styling and the app component.
- Language-aware fonts: Hebrew, English, Arabic, Spanish, French and Japanese each get a defined display, body and accent set.
- A section gallery with Hero, Sun, Album, Roast and Signal, always ending on a Signal section with the call to action.
Who the cinematic-scrub-landing skill is for
Best for
- Brand and product launches where you already have a hero video and a story to tell, in any language.
- Designers who want a strong visual direction rather than a generic template. Check the result with a landing page conversion audit afterward.
- Teams that want a clear brief before code. Phase 0 outputs a palette, a font set and a narrative arc in about 200 words.
Not for
- Parallax frame-scrub pages. The skill points to parallax-landing-page for those and video-edit for editing work.
- Heavy motion for users who prefer less of it; the CSS includes reduced-motion handling, but run a web accessibility audit on the finished page.
- Pages judged mainly on conversion copy. See page CRO for that side.
Use it with UiChemy
The skill outputs a React app, not WordPress. To bring a build like this into WordPress, UiChemy's AI to WordPress imports AI builds, and Composer edits the resulting HTML, CSS and JS. Review the scrub script by hand. Get Started on uichemy.com.
How to install Cinematic Scrub Landing Skill: Mouse-Scrub Video Hero
git clone https://github.com/hoodini/ai-agents-skills.gitClone the repository
Run
git clone https://github.com/hoodini/ai-agents-skills.git. The default branch is master, and the skill is in skills/cinematic-scrub-landing.Copy the skill folder
Copy skills/cinematic-scrub-landing, with its assets and references folders, into the folder your agent loads skills from.
Install ffmpeg
The skill checks for ffmpeg first and stops if it is missing. On macOS the skill suggests
brew install ffmpeg.Prepare your assets
Put the hero video, an SVG logo if you have one, and one to three product images in a clean working folder.
Check that it loaded
Ask your agent to build a cinematic scrub landing page from your hero video. It should first write a brief under 200 words with a palette, fonts and a narrative arc, then run the ffmpeg re-encode.
Key features
- Mouse-scrub video heroMoving the mouse left to right scrubs the video timeline while the video stays fixed behind the whole page.
- All-keyframes re-encodeAn ffmpeg command makes every frame a keyframe so seeking is instant, with output sized to 5 to 50 MB.
- Phase 0 design briefBefore any code, the agent outputs a brief of at most 200 words with a five color palette, a font trinity and a narrative arc.
- Cohesive palette rulesFive named colors: background, cream, accent, accent2 and support. The cream is never pure white.
- Language-aware typographyDefined font sets for Hebrew, English, Arabic, Spanish, French, Italian, German and Japanese, with a fallback for other scripts.
- RTL and LTR supportThe html element gets a lang and dir value, and the page honors the right-to-left setting.
- Section libraryHero, Sun, Album, Roast and Signal sections, each with its own look, ending with a Signal section.
- Design system CSSGlass panels, a primary call to action, a grid background, a 0.9 second reveal animation, polaroid, stamp and ribbon styles, and reduced-motion handling.
- Reusable componentsA reveal hook, a glass card, a decorative motif component and a scroll-to-top button defined in the app file.
- Verification gateA final phase with 12 checks to run before the agent reports the page as done.
Frequently asked questions
What does the cinematic-scrub-landing skill build?
It builds a landing page with a fixed hero video that scrubs as the mouse moves left to right, then four or five opaque sections that follow a narrative arc. It handles palette, fonts, right-to-left layout, scaffolding and a verification pass.
How do I install cinematic-scrub-landing?
Clone hoodini/ai-agents-skills and copy skills/cinematic-scrub-landing into the folder your agent loads skills from. The repository README also offers a one command installer, but it installs a 16 skill package rather than this skill alone.
What do I need before using it?
A hero video in mp4, mov or webm, and a product, subject or brand. A logo, with SVG preferred, and one to three product images are optional. You also need ffmpeg, plus Node and npm for the Vite React TypeScript scaffold.
Why does the skill re-encode the video?
Browsers only seek instantly to keyframes, and standard video has few of them, which makes mouse scrubbing stutter. The ffmpeg command sets every frame as a keyframe and drops audio, and the output should land between 5 and 50 MB.
Which languages does it support?
It defines font sets for Hebrew, English, Arabic, Spanish, French, Italian, German and Japanese, and says to pick three Google Fonts matching the script for others. Right-to-left languages such as Hebrew and Arabic set the page direction.
Does it work in Claude Code and other agents?
The repository describes skills for AI coding agents and names Claude Code, GitHub Copilot, Cursor and Windsurf. The skill also ships a pasteable GOLDEN_PROMPT.md for tools without skill support, so you can paste the text into a chat instead.
Which skill should I use instead for scroll-based scrubbing?
The skill's own guidance says parallax-landing-page covers landing pages where the scroll scrubs frames in place, and video-to-landing-page covers an Apple-style sticky hero. Choose this skill when the hero should respond to the cursor.
What license does the skill have?
The repository data shows no license, so the license is listed as See repository. Check the repository itself before you reuse the skill or its output in a commercial project.