Guide · Agent skill
How to use the Scroll-Scrubbed Word Reveal agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The scroll-scrubbed-word-reveal skill teaches an AI coding agent to build a section of text that lights up word by word as the reader scrolls, instead of appearing all at once. It is written for front-end developers and designers who want a paced reading effect for headlines, quotes, manifestos or onboarding copy. After this guide you will know what an agent skill is, how to install this one, how to ask for the effect, and what to check before shipping it.
Scroll-Scrubbed Word RevealMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the scroll-scrubbed-word-reveal skill as a ZIP from the agent-skills directory page.
- 2Unzip into a skills folder. Place the scroll-scrubbed-word-reveal folder in ~/.claude/skills/ for personal use, or in a project's .claude/skills/ folder.
- 3Or upload in the Claude apps. Go to Settings → Capabilities → Skills and upload the ZIP.
- 4Describe the passage. Tell the agent which text should reveal on scroll and what kind of content it is, such as a manifesto or onboarding message.
- 5Mention links and emphasis. State that links, bold and italic text must stay clickable and semantic, so the agent preserves the markup.
- 6Review reduced-motion and mobile. Check that prefers-reduced-motion shows all words and that the layout works at 390, 768 and 1440 pixel widths.
What is an agent skill, and what does this one make the agent do?
An agent skill is a folder with a SKILL.md file that gives an AI agent specific instructions for a task. When the skill is installed and relevant, the agent follows its guidance instead of improvising.
This skill covers a single web pattern. The agent keeps one untouched, accessible copy of your text in the page, splits only the text nodes into word tokens, and maps section scroll progress to each word's visibility. Hidden words are faded, blurred and slightly offset; the final state matches normal typography. Inline links, bold and italic text stay semantic.
- Keeps real text in the DOM so screen readers and copy-paste still work
- Shows every word immediately when the user prefers reduced motion
- Includes a demo page (demo/index.html) and a prompt file (demo/PROMPT.md) to recreate or adapt the effect
Install the scroll-scrubbed-word-reveal skill
Download the skill as a ZIP from the agent-skills directory page. Unzip it so the folder named scroll-scrubbed-word-reveal sits inside one of the locations below.
For a personal install that applies to all your projects, place it in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder. Alternatively, upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/scroll-scrubbed-word-reveal/
- Project: .claude/skills/scroll-scrubbed-word-reveal/ inside your repository
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Trigger the skill with natural requests
You do not need special syntax. Describe the effect and the kind of text, and mention the skill by name if you want to be certain it is used. The demo prompt file uses the $scroll-scrubbed-word-reveal form.
The skill is meant for passages where scrolling should pace comprehension. Say so in your request, and avoid asking for typing effects or autoplay, since the skill advises against them unless you explicitly request them.
- "Use $scroll-scrubbed-word-reveal to make this manifesto read word by word as the reader scrolls."
- "Build a headline section where each word reveals on scroll. Keep the links in the paragraph clickable."
- "Recreate the demo with scroll-paced reveal for this onboarding message, with reduced-motion support."
Use $scroll-scrubbed-word-reveal to make this marked-up passage become readable word by word as the reader scrolls.Know what the skill needs and what it does not do
The only hard requirement is a web browser with JavaScript. GSAP with ScrollTrigger is optional: use it when you need shared timelines or precise start and end control. Otherwise the skill uses dependency-free scroll measurement with requestAnimationFrame.
According to the skill's metadata, it does not run scripts and does not use the network. The guidance itself is about markup and CSS-driven visuals, not about installing packages.
- Requires: web browser with JavaScript
- Optional: GSAP with ScrollTrigger
- Runs scripts: no
- Uses network: no
- Not suited to long body text that must be read quickly, since scroll-paced reveals slow reading
Review the output for accessibility and readability
The skill sets clear defaults: hidden opacity of 0.12 to 0.3, blur of 4 to 10px, and vertical offset of 0.08 to 0.22em. The reveal span is 120 to 220% of the viewport for a paragraph. Under prefers-reduced-motion: reduce, every word shows immediately and blur, transforms and pinning are removed.
Check the result before shipping. The skill's verification list includes 200% zoom, widths of 390, 768 and 1440 pixels, forward and reverse scrolling, keyboard focus, and teardown. The final DOM must still communicate the full sentence with JavaScript disabled.
- Test inline links and emphasis, punctuation, repeated spaces and long words
- Confirm contrast in both hidden and final states
- Confirm that clean-up restores the original markup on route change or unmount
Use the demo and references as working material
The demo/index.html file is the working reference for the visual and interaction behaviour. demo/PROMPT.md gives prompts for recreating it as a standalone HTML document with all CSS and JavaScript inline. REFERENCES.md lists the implementation sources, including the GSAP ScrollTrigger documentation, MDN pages on TreeWalker and prefers-reduced-motion, and a WAI page on page structure and headings.
- demo/index.html: visual, interaction and accessibility reference
- demo/PROMPT.md: recreation prompts
- REFERENCES.md: links-only source list
- agents/openai.yaml: included in the package
What people use it for
- A brand manifesto where each sentence lights up as visitors scroll
- A product statement on a landing page that paces the reader through a key claim
- An onboarding welcome message in which the reader sees each word as they progress
- A quote section on an editorial page, with links and emphasis kept intact
- A headline block for a long-form article opener
Frequently asked questions
How do I install the scroll-scrubbed-word-reveal agent skill?
Download the ZIP from the agent-skills directory page and unzip it so the scroll-scrubbed-word-reveal folder sits in ~/.claude/skills/ for personal use, or in a project's .claude/skills/ folder. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
What does the scroll-scrubbed-word-reveal skill require?
It requires a web browser with JavaScript. GSAP with ScrollTrigger is optional and useful for shared timelines or precise start and end control; otherwise dependency-free scroll measurement is used.
Is the scroll-scrubbed-word-reveal skill free to use?
The item is listed under the MIT licence. Check the licence file in the package for the terms that apply to your project.
Does the skill run scripts or use the internet?
According to its listing, it does not run scripts and does not use the network. It provides instructions and demo files for building the effect.
Does the effect hide text from screen readers or from users with reduced motion?
No. The skill keeps the real text in the page and marks generated spans aria-hidden only when an equivalent accessible copy remains. Under prefers-reduced-motion, all words show immediately.
When should I not use this skill?
Avoid it for long body text that must be read quickly, because scroll-paced reveals slow reading. Pick a different approach if you need a typewriter or autoplay animation, which the skill itself advises against unless requested.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or designer building editorial, manifesto or landing-page sections where a short passage should be paced by scrolling. Pick something else for dense body copy, typewriter effects or autoplaying animations, since the skill itself steers away from those.
Download the skill