scroll-scrubbed-word-reveal

Reveal text word by word tied to scroll progress while preserving inline markup and accessibility.

Updated May 5, 2026
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill scroll-scrubbed-word-reveal-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scroll-scrubbed-word-reveal
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/scroll-scrubbed-word-reveal
Command: npx skills add https://github.com/josippapez/ai-setup --skill scroll-scrubbed-word-reveal-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Scroll-driven text reveals often break inline links and emphasis, rely on fragile line-based splitting, or ignore reduced-motion users. This Skill provides a robust pattern for scrubbing word visibility from scroll progress without destroying semantic markup or accessibility. ## Core Features & Use Cases - DOM-safe word splitting: Walks text nodes with TreeWalker, skips scripts and form controls, and preserves whitespace and inline elements like links and emphasis. - Scroll-progress mapping: Maps section scroll progress to per-word opacity, blur, and offset via CSS custom properties, using GSAP ScrollTrigger or a dependency-free requestAnimationFrame approach. - Accessibility and cleanup: Keeps an untouched accessible text source, honors prefers-reduced-motion, and restores the original DOM on teardown. - Use Case: A designer building an editorial landing page wants a manifesto paragraph to fade in word by word as the reader scrolls, without breaking the inline link in the sentence or failing screen readers. ## Quick Start Ask the AI to implement a scroll-scrubbed word-by-word reveal for a headline or paragraph on your page, preserving inline links and respecting reduced-motion preferences.

Frequently Asked Questions about scroll-scrubbed-word-reveal

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reveal text word by word on scroll?▼

Split text nodes into word spans using TreeWalker, then map section scroll progress to a per-word progress value that drives opacity, blur, and vertical offset via CSS custom properties. Use GSAP ScrollTrigger with scrub or a requestAnimationFrame scroll loop.

How to split text into words without breaking links and emphasis?▼

Walk text nodes with TreeWalker instead of using textContent or innerHTML, which flatten markup. Replace only non-whitespace tokens with spans so links, strong, em, and other inline elements keep their semantics and styling.

Should I use GSAP ScrollTrigger or vanilla JavaScript for scroll animations?▼

Use GSAP ScrollTrigger with scrub when you need precise start and end positions, refresh handling, or a shared timeline. Use a dependency-free scroll measurement with requestAnimationFrame for a standalone section without external libraries.

Does scroll-based word reveal work with prefers-reduced-motion?▼

Yes, but it must be handled explicitly. Under prefers-reduced-motion: reduce, show every word immediately, remove blur and transforms, and remove any scroll pinning so the text reads as normal static content.

Why avoid line-based text splitting for scroll animations?▼

Line-based splitting breaks when browser line wrapping changes with container width, language, zoom, or font loading. Word-level splitting keeps wrapping free to reflow and does not require rebuilding tokens on resize.