Skip to content

Scroll-Scrubbed Word Reveal

Build accessible scroll-linked word-by-word text reveals that keep links and emphasis intact

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 text lights up word by word as the reader scrolls, instead of appearing all at once. It keeps the real text in the page so links, bold and italic text, and screen readers still work, and it shows every word immediately for users who prefer reduced motion. The skill also includes a demo page and a prompt file to help the agent recreate or adapt the effect.

Great for

  • Front-end developers building editorial, manifesto, or landing-page sections with scroll effects
  • Designers who want a paced reading effect for headlines, quotes, or onboarding copy

Skip it if

  • Sites where long body text must be read quickly, since scroll-paced reveals slow reading and can frustrate users
  • Projects needing a typewriter or autoplay animation, which the skill itself advises against unless requested

Try asking

  • “Make the manifesto paragraph on my homepage reveal word by word as people scroll, keeping the inline links working”
  • “Add a scroll-scrubbed reveal to this product statement, respecting reduced motion”
  • “Convert this onboarding message into a scroll-linked word reveal using the demo as a reference”
Step-by-step guide: how to use Scroll-Scrubbed Word RevealInstall, 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-word-reveal.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip scroll-scrubbed-word-reveal.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip scroll-scrubbed-word-reveal.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

  • Name the exact section and text you want revealed so the agent can keep your existing markup and links intact
  • Ask the agent to test with reduced motion, JavaScript disabled, and 200% zoom, as the skill's verification checklist recommends
  • Check the demo/index.html file first to see the expected result before asking for a remix

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.