A collection of Claude Code skills for building high-quality web animations and visual effects — built from real production work on a luxury watch brand site. Each skill pairs ffmpeg video processing with production-ready HTML, CSS, and JavaScript.
All skills in this repo follow the CLAUDE.md operating manual: two-pass screenshot verification, parallel execution, and design quality principles that avoid generic AI aesthetics.
Turn any video into a scroll-driven animation. The video's playback position maps directly to scroll progress — each frame reveals as the user scrolls. Includes optional animated text overlays that fade in and out at defined scroll positions.
Good for: product explodes, process reveals, timeline animations, cinematic storytelling sections
Full-bleed hero section backed by a seamless boomerang video loop (forward → reverse, no hard cut). Gradient overlays are calibrated so headline text stays readable across all video frames.
Good for: landing page heroes, product launches, brand intros, any hero that needs motion without distraction
Each skill is a Claude Code slash command — a markdown file with step-by-step instructions that Claude follows when you describe what you want. Claude reads the skill, asks for any missing inputs, then executes the full workflow: ffmpeg encoding, HTML/CSS/JS generation, and two-pass screenshot verification.
Every skill follows the workflow defined in CLAUDE.md:
- Understand what's being built
- Plan all file changes in parallel
- Build and encode
- Pass 1 screenshots — desktop (1440×900) + mobile (390×844), write observations
- Refine based on what Pass 1 reveals
- Pass 2 screenshots — same viewports, compare directly
- Verify accessibility and performance
Screenshots are saved to .screenshots/<task-slug>/ and never committed.
- Claude Code CLI installed and running
- ffmpeg available on
PATH - Node.js for Playwright screenshot verification
Copy the skill folder(s) you want into your Claude skills directory:
# macOS / Linux — install both
cp -r scroll-reveal-video hero-loop-background ~/.claude/skills/
# Windows (PowerShell) — install both
Copy-Item -Recurse scroll-reveal-video "$env:USERPROFILE\.claude\skills\"
Copy-Item -Recurse hero-loop-background "$env:USERPROFILE\.claude\skills\"Claude Code picks up skills automatically — no restart needed.
Just describe what you want. Claude will recognise the intent and load the right skill:
Add a scroll-reveal video section using assets/explode.mp4
Create a hero with a boomerang loop from this video: product.mp4
I want the video to animate as I scroll — use footage/watch.mp4
Both skills were developed while building a luxury watch brand website. The techniques were validated end-to-end:
-
scroll-reveal-video — the challenge was making a 121-frame watch explosion video scrub smoothly without blocking artifacts or grain. Root cause: H.264 inter-frame compression produces artifacts when
video.currentTimeseeks to a non-keyframe position. All-I-frame encoding (-g 1) eliminates this entirely. -
hero-loop-background — the goal was a dynamic hero background that loops with no hard cut. The ffmpeg
reversefilter +concatcreates a mathematically seamless forward→reverse loop that no crossfade can replicate.
claude-web-animations/
├── README.md
├── CLAUDE.md ← web design operating manual
├── LICENSE
├── scroll-reveal-video/
│ ├── SKILL.md ← Claude skill instructions
│ └── README.md ← documentation
└── hero-loop-background/
├── SKILL.md
└── README.md
MIT — see LICENSE