A skill for coding agents that turns static website sections into scroll-driven animations. It researches your site, picks the right animation pattern for each section, generates the video assets it needs (a first frame, a last frame, and a video connecting them, made with the Higgsfield MCP server), processes them for smooth scroll scrubbing, and wires up reusable React components.
This skill could be used with any code agent that supports skills.
Scroll animation is really two separate problems, and mixing them up is the most common mistake:
- The asset — a short video. It can be AI-generated from a first-frame image, a last-frame image and a motion prompt.
- The mechanism — how scroll actually drives motion on the page. Scrubbing a video is just one of eight patterns. Most sections work better with pinned transforms, parallax, sticky cards or reveals, and those need no video at all.
umbra treats scrubbed video like a hero shot in a film: one per page, maybe two. It also follows the pipeline that works in production. Raw MP4s can't be scrubbed smoothly, because video.currentTime only seeks to sparse keyframes. So the video gets extracted into a WebP frame sequence and drawn on a <canvas> instead.
| Phase | What happens |
|---|---|
| 0 Recon | Look at the codebase or live URL: stack, sections, brand, existing animation libs |
| 1 Pattern selection | Pick one pattern per section from the catalog; you sign off before anything is generated |
| 2 Asset spec | Write a shot spec for each video section: first and last frame, motion prompt, duration, aspect ratio |
| 3 Generation | Generate the first frame, get your approval, derive the last frame from it, check the price, then generate the connecting video |
| 4 Post-processing | Extract frames with ffmpeg: desktop and mobile WebP sets, a poster image, manifest.json |
| 5 Integration | Build the React components: canvas scrubber, pinned scenes, parallax, sticky cards |
| 6 Verify | Smooth scrubbing in both directions, no layout shift, reduced-motion fallback, sane page weight |
Video generation costs credits, so the skill checks the price and asks for confirmation before that one call — even when you told it to run end-to-end. If Higgsfield isn't connected, you still get the shot specs as a brief you can take to Runway, Kling, Veo or a real shoot, and the sections are built against placeholders in the meantime.
- Claude Code, or any agent runtime that loads Agent Skills
ffmpegandffprobeon PATH, for frame extraction- Higgsfield MCP server — optional, only needed for AI asset generation
- A React project. framer-motion (
motion) is preferred; GSAP and vanilla JS hosts work too, via the mappings inreact-components.md
Copy umbra/ into your skills directory:
# project-level
.claude/skills/umbra/
# or user-level
~/.claude/skills/umbra/
Then just ask for scroll animations in any project — "plan scroll animations for my landing page", "add an Apple-style scrubbed hero" — and the skill kicks in on its own.
ScrollSequence— a pinned canvas that scrubs through the frame sequence. Preloads all frames (and aborts if unmounted), handles retina screens, draws at most once per display frame, falls back to a poster image for reduced-motion users, and uses a lighter frame set on mobileLazyMount— keeps below-the-fold sequences out of the initial page loadPinnedScene— a sticky section that exposes scroll progress as aMotionValue, for choreographing transformsParallaxLayer, sticky stacking cards, and progress-keyed text overlays
Coming soon...