Skip to content
Get packs

Masked Word Reveal

Makes text reveal word by word on scroll using GSAP ScrollTrigger and an overflow mask.

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

What it does

This skill teaches the agent how to add a animated text effect to a website where each word of a headline slides up from behind an invisible mask as the reader scrolls it into view. The agent knows the HTML markup, CSS masking rules, a JavaScript helper that splits text into words, and sensible timing defaults. It also knows to respect users who have reduced-motion settings turned on, and to avoid splitting text containing links or buttons.

Great for

  • Front-end developers adding editorial-style headline animations to a marketing or portfolio site that already uses GSAP
  • Designers who want a polished scroll reveal and are working with a developer or agent to implement it

Skip it if

  • Projects that do not use GSAP: the skill assumes the GSAP and ScrollTrigger libraries are loaded, so it will not work as-is without them
  • Long paragraphs or text containing links and buttons: the skill itself warns that splitting these can break meaning and layout

Try asking

  • “Add a masked word reveal on scroll to the hero headline on my landing page using GSAP ScrollTrigger”
  • “Make the section titles on this React page reveal word by word as they enter the viewport, and clean up properly on route change”
  • “Update my existing h1 so each word rises through an overflow mask, respecting reduced-motion settings”
Step-by-step guide: how to use Masked Word RevealInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    masked-reveal.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip masked-reveal.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip masked-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 element and your framework (plain HTML or React) so the agent picks the matching setup snippet
  • Keep the target text short, such as a headline of one or two lines, for the best effect
  • Ask the agent to call ScrollTrigger.refresh() if images or fonts load late and shift the layout

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • 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.