How to use the Scroll-Scrubbed Visual Sequence agent skill

What the skill makes the agent do

When the skill is active, the agent knows how to build a web section where a visual (a video, image sequence, canvas, SVG, or HTML elements) changes state as the visitor scrolls. The visual stays pinned on screen, scrolling down advances the animation, and scrolling up reverses it.

The skill is about animation and its behaviour, not text or layout work. It gives guidance on choosing a renderer, keeping the page usable without motion, and handling performance, accessibility, and cleanup. Scroll position, not wheel delta, elapsed time, or autoplay, decides the exact visual state.

• Hero transformations and product assembly
• Interface state walkthroughs and object rotation
• Diagrams and photo sequences that move forward and backward with native scrolling

Install the skill from the ZIP

Download the ZIP for scroll-scrubbed-visual-sequence from this page and unzip it. For a personal setup, place the folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder.

You can also upload the skill in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload it there.

• Personal install: ~/.claude/skills/scroll-scrubbed-visual-sequence
• Project install: .claude/skills/scroll-scrubbed-visual-sequence inside your project
• Claude apps: Settings → Capabilities → Skills

Trigger the skill with a natural request

You do not need a special command. Describe the effect you want and mention the scroll behaviour. The skill's description covers hero transformations, product assembly, interface state walkthroughs, object rotation, diagrams, and photo sequences that must move forward and backward with native scrolling, so requests that match those cases are the most likely to use it.

The demo prompt in the package starts with $scroll-scrubbed-visual-sequence, which names the skill directly. Use that form when you want to be certain it is picked up.

• Use $scroll-scrubbed-visual-sequence to build a pinned hero where a product assembles as the visitor scrolls down and disassembles when they scroll up.
• Use $scroll-scrubbed-visual-sequence to turn these 96 photos into a scroll-scrubbed sequence on a sticky stage, with a static frame for reduced motion.
• Use $scroll-scrubbed-visual-sequence to make an interface walkthrough where each scroll stop shows the next app state.
• Use $scroll-scrubbed-visual-sequence to recreate the demo in demo/PROMPT.md as a standalone HTML file.

Choose the right renderer

The skill recommends a renderer based on the content. Video suits continuous, photographic, or expensive-to-render sequences. Image sequences suit exact art-directed frames. Canvas suits procedural drawing or compositing. SVG or DOM suits diagrams, product cards, interface states, and accessible text. WebGL is only for cases where depth, lighting, or a real 3D camera materially helps.

• Video: encode frequent keyframes, preload metadata, reserve the aspect ratio
• Image sequence: preload the current frame first, then nearby frames
• Canvas: cap device pixel ratio at 2 and redraw only when progress changes
• SVG or DOM: drive transforms, opacity, clip paths, and CSS variables

Review the output and check it

Ask the agent to verify its work. The skill lists checks: forward and reverse scrolling, fast flicks, resize while active, widths of 390, 768, 1024 and 1440 pixels, unloaded frames, blocked video, reduced motion, keyboard order, route cleanup, and console errors. It also says the same scroll position must always reproduce the same state.

Under prefers-reduced-motion: reduce, the skill removes pinning and scrubbing, shows the selected static frame, and restores normal document flow. Essential copy should stay in semantic HTML rather than being baked into frames.

• Test scrolling in both directions and with fast flicks
• Resize the window while the animation is active
• Confirm reduced motion shows a static frame
• Check console errors and cleanup on route change