Skip to content
Get packs

Scroll-Scrubbed Visual Sequence

Build scroll-driven visual animations that play forward and backward with native scrolling

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
5 files

What it does

When installed, the agent knows how to build a web section where a visual (video, image sequence, canvas, SVG, or HTML elements) changes state as the visitor scrolls, pinned in place on screen. Scrolling down advances the animation and scrolling up reverses it. The skill gives guidance on choosing a renderer, keeping the page usable without motion, and handling performance, accessibility, and cleanup. It also points to a demo page and a prompt for recreating it.

Great for

  • Front-end developers building product hero animations or scroll-driven storytelling pages
  • Designers who want to prototype a product assembly or interface walkthrough that responds to scrolling
  • Teams that already use GSAP ScrollTrigger and need consistent pin and refresh behaviour

Skip it if

  • Simple static pages or content sites where motion adds nothing (the skill is for building animation, not text or layout work)
  • Projects that must support older devices or heavy media budgets without testing, since large video or image sequences can be slow to load

Try asking

  • “Build a scroll-scrubbed hero where a 96-frame product rotation plays as the user scrolls down the page”
  • “Create a pinned section that walks through three interface states with copy stops, keeping it accessible with reduced motion”
  • “Turn this diagram into a scroll-controlled SVG sequence that reverses cleanly when scrolling back up”
Step-by-step guide: how to use Scroll-Scrubbed Visual SequenceInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 5 original files, the MIT licence and an attribution note.

    scroll-scrubbed-visual-sequence.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip scroll-scrubbed-visual-sequence.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip scroll-scrubbed-visual-sequence.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Specify the renderer you want (video, image sequence, SVG, or canvas) and the number of frames or scroll distance up front so the agent follows the configuration approach in the skill.
  • Ask for reduced-motion and mobile checks explicitly, since the skill's verification list covers widths of 390 to 1440 pixels.
  • If you use GSAP, mention it in your request so the agent uses ScrollTrigger rather than the dependency-free approach.

What's inside

  • agents/openai.yaml
  • demo/index.html
  • demo/PROMPT.md
  • REFERENCES.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.