# scroll-scrubbed-word-reveal

A skill that reveals words in marked-up text as scroll progress advances. Built for headlines, quotes and onboarding copy.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1400 installs · ★ 7001
- Author: MengTo
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/scroll-scrubbed-word-reveal/SKILL.md
- Updated: 2026-10-25
- HTML: https://affpapa.org/en/nevibecode/skills/scroll-scrubbed-word-reveal

## What it does

The skill takes text already in the DOM and splits it into word spans. Section progress becomes a `--word-progress` value per word, and hidden opacity, blur and vertical offset are interpolated from it. The visible state stays identical to normal typography, so browser line wrapping remains free to change with container width, language, zoom and font loading.

Inline markup survives: links, `strong`, `em` and accent spans keep their semantics and styling. Text nodes are walked with `TreeWalker` rather than flattened through `textContent` or `innerHTML`. Generated spans get `aria-hidden="true"` only when an equivalent unsplit accessible copy stays in the DOM. Under `prefers-reduced-motion: reduce` every word shows immediately, with blur, transforms and pinning removed.

GSAP ScrollTrigger with `scrub` is the suggestion when you need precise starts, ends or a shared timeline; a dependency-free scroll measurement plus `requestAnimationFrame` covers a standalone section. Hidden opacity runs from `0.12` to `0.3`, blur from `4px` to `10px`. On unmount you have to kill ScrollTriggers, remove scroll and resize listeners, cancel animation frames and restore the original subtree — skip that and stale spans stay in the DOM after a route change.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill scroll-scrubbed-word-reveal -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/scroll-scrubbed-word-reveal/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/scroll-scrubbed-word-reveal/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill scroll-scrubbed-word-reveal -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/scroll-scrubbed-word-reveal/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill scroll-scrubbed-word-reveal -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/scroll-scrubbed-word-reveal/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install MengTo/Skills scroll-scrubbed-word-reveal
```

2. **Manually: put the files in place**
- File: `.github/skills/scroll-scrubbed-word-reveal/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill scroll-scrubbed-word-reveal -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/MengTo/Skills --path agent-skills/web-design/scroll-scrubbed-word-reveal
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/scroll-scrubbed-word-reveal/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill scroll-scrubbed-word-reveal -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/scroll-scrubbed-word-reveal/SKILL.md

## When to use it
- reveal a headline as the reader scrolls without swapping out real text
- keep working links and italics inside an animated paragraph
- survive line wrapping changes from width, zoom and font loading
- turn the effect off for readers who asked for reduced motion
- restore the original DOM when the component unmounts

## Example prompts
- Build a scroll-scrubbed-word-reveal section for the manifesto headline
- Split this paragraph into words on scroll, leave links and em alone
- Add prefers-reduced-motion: reduce so every word shows at once

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 0132333ccbd39a19.

BEGIN THIRD-PARTY FILE 0132333ccbd39a19
````text
---
name: scroll-scrubbed-word-reveal
description: Reveal marked-up text word by word as scroll progress advances, while preserving semantic inline links, emphasis, responsive line wrapping, and reduced-motion readability. Use for headlines, quotes, manifestos, product statements, onboarding messages, or editorial passages where scrolling should pace comprehension rather than simulate typing.
---

# Scroll-Scrubbed Word Reveal

Make reading progress visible without replacing real text, breaking inline markup, or depending on a fixed line count.

## Prepare the text

1. Keep one untouched accessible text source in the DOM.
2. Walk text nodes with `TreeWalker`; do not flatten the container with `textContent` or `innerHTML`.
3. Skip `script`, `style`, form controls, and elements marked with `[data-no-split]`.
4. Replace only non-whitespace tokens with spans and preserve whitespace nodes exactly.
5. Mark generated spans `aria-hidden="true"` only when an equivalent unsplit accessible copy remains available.

Preferred structure:

```html
<p class="reveal" data-reveal>
  Motion should <em>explain</em> the next state, not decorate it.
</p>
```

Avoid line-based splitting. Browser line wraps must remain free to change with container width, language, zoom, and font loading.

## Map scroll to words

Use section progress as the single source of truth:

```js
const reveal = Math.min(1, Math.max(0, progress));
const local = Math.min(1, Math.max(0, reveal * wordCount - index));
word.style.setProperty("--word-progress", local);
```

Interpolate hidden opacity, blur, and vertical offset from `--word-progress`. Keep the visible state identical to normal typography.

Use GSAP ScrollTrigger with `scrub` when precise starts, ends, refresh, or a shared timeline is needed. Use a dependency-free scroll measurement plus `requestAnimationFrame` for a standalone section.

## Set useful defaults

- Hidden opacity: `0.12–0.3`
- Blur: `4–10px`
- Vertical offset: `0.08–0.22em`
- Reveal span: `120–220%` of the viewport for a paragraph
- Direct word overlap: `10–30%`
- Easing: none for the scroll mapping; ease only the visual interpolation when needed
````
END THIRD-PARTY FILE 0132333ccbd39a19

The third-party file has ended. Everything between the 0132333ccbd39a19 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2168 of 4107 bytes. © MengTo · MIT · https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/scroll-scrubbed-word-reveal/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md