Skip to content
Get packs

Guide · Agent skill

How to use the Masked Word Reveal agent skill (masked-reveal)

Updated · written with AI from the project's own documentation and checked against our catalogue data

The masked-reveal skill is a set of instructions that lets an AI coding agent add a word-by-word headline animation to a web page. Each word slides up from behind an invisible overflow mask as the reader scrolls it into view, using GSAP and its ScrollTrigger plugin. This guide explains what the skill does, how to install it, how to ask for it in plain language, and where it does not fit, so you can get a working reveal on a page that already uses GSAP.

Masked Word RevealMengTo/Skills · MIT

Quick start

  1. 1Download and unzip. Download the masked-reveal ZIP from this page and unzip it. The folder contains SKILL.md and a demo folder.
  2. 2Place the skill folder. Put masked-reveal in ~/.claude/skills/ for personal use, or in your project's .claude/skills/ folder. You can also upload it under Settings → Capabilities → Skills in the Claude apps.
  3. 3Confirm GSAP is loaded. Make sure your page loads GSAP and the ScrollTrigger plugin, since the skill will not run without them.
  4. 4Ask for the effect. Describe the element and the effect in plain words, for example a hero headline that reveals word by word on scroll.
  5. 5Review the generated code. Check that the markup uses data-masked-reveal, that text is hidden until initialization, and that aria-label holds the full text.
  6. 6Test reduced motion. Turn on reduced-motion in your operating system or browser and confirm the text appears static.

What the masked-reveal skill makes the agent do

An agent skill is a folder with a SKILL.md file that tells a coding agent how to handle a specific kind of task. When the task matches the skill's description, the agent reads these instructions and follows them. This skill covers one effect: staggered masked word reveals on scroll.

The agent learns the HTML markup, the CSS masking rules, a JavaScript helper that splits text into words, and default timing. It also learns to respect users who have reduced-motion settings turned on, and to avoid splitting text that contains links or buttons.

  • Trigger: the animation starts when the top of the text reaches 82% of the viewport.
  • Duration: 0.7s to 0.9s per word, with a stagger of 0.025s to 0.045s between words.
  • Offset: words start at yPercent 110 and move to 0. Easing is power3.out or expo.out.
  • Replay: text reveals once by default.
  • The helper avoids the paid SplitText plugin and keeps spaces intact.

Install the masked-reveal skill

Download the ZIP for agent-skills/web-design/masked-reveal from this page and unzip it. For a personal setup, place the folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.

You can also upload the skill in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload it there.

  • Personal install: ~/.claude/skills/masked-reveal
  • Project install: .claude/skills/masked-reveal inside your project
  • Claude apps: Settings → Capabilities → Skills

Check your project before you ask

The skill assumes two things. First, the GSAP library with the ScrollTrigger plugin must be loaded in the page. Second, the agent must be working in a web project where it can edit HTML, CSS and JavaScript.

If your page does not load GSAP, the skill will not work as-is. Ask the agent to add GSAP and ScrollTrigger first, or to load them from your existing setup.

  • GSAP with the ScrollTrigger plugin loaded in the page
  • A web project the agent can edit (HTML, CSS, JavaScript)

Trigger the skill with natural requests

You do not need special syntax. Describe the effect you want and name the element. The skill's description covers headings, hero copy, section titles and editorial text that should reveal word by word through an overflow mask as they enter the viewport.

The demo prompts in the package use the form Use $masked-reveal to ..., which you can copy if your tool supports explicit skill names.

  • Add a word-by-word scroll reveal to my hero headline using GSAP ScrollTrigger.
  • Make the section titles on this page rise through a mask as they scroll into view.
  • Use $masked-reveal to add editorial headline reveals to this landing page.
  • Wrap the intro heading in the masked reveal and keep it accessible for reduced-motion users.

Use the markup and helper the skill provides

The skill gives the agent a standard pattern. The heading gets the class masked-reveal and the data-masked-reveal attribute. A JavaScript helper then wraps each word in a mask span and a word span, sets aria-label to the full text, and runs a GSAP fromTo animation on the words.

The skill also includes a React pattern that wraps initialization in gsap.context and reverts it on unmount.

  • Keep headlines short. The skill advises against long paragraphs.
  • Do not split text that contains links, buttons or meaningful inline markup.
  • Use ScrollTrigger.refresh() after late-loading images or layout shifts.
  • Initialize after fonts load if line wrapping is critical.
<h1 class="masked-reveal" data-masked-reveal> Design systems that feel alive from the first scroll. </h1>

Check the result

Use the quick checks in the skill to confirm the reveal is correct. Text should be hidden until GSAP initializes, then become visible. Screen readers should get the full original text through aria-label. Spaces between words should be preserved. Reduced-motion users should see static text. ScrollTrigger should be cleaned up in single-page app routes.

  • Text hides before GSAP runs, then appears with autoAlpha: 1
  • Screen readers read the original full text
  • Spaces between words are kept
  • Reduced-motion users see static text
  • ScrollTrigger is cleaned up on route changes

What people use it for

  • Animating a hero headline on a marketing site that already uses GSAP.
  • Adding rising section titles to a portfolio page as the reader scrolls.
  • Creating editorial intro text for a long-form article or landing page.
  • Bringing a React single-page app's headings into a consistent scroll reveal, with cleanup on unmount.

Frequently asked questions

Is the masked-reveal skill free?

The skill is published under the MIT licence, as listed on this page. The skill itself does not use the paid SplitText plugin, since its helper splits words without it.

What do I need to use the masked-reveal skill?

You need GSAP with the ScrollTrigger plugin loaded in the page and a web project where the agent can edit HTML, CSS and JavaScript. The skill does not run scripts or use the network.

Does masked-reveal work without GSAP?

No. The skill assumes GSAP and ScrollTrigger are loaded, so it will not work as-is without them. Add those libraries to your page first.

Where do I put the skill folder?

Use ~/.claude/skills/ for a personal install or .claude/skills/ inside a project. In the Claude apps you can upload it under Settings → Capabilities → Skills.

Can I use it on paragraphs with links?

The skill advises against it. It warns that splitting text with links or buttons can break meaning and layout, so use it on short headlines, labels and section intros.

Will it work for users who prefer reduced motion?

Yes, the skill is built for that case. When reduced-motion is set, the animation is skipped and the text stays static and visible.

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 masked-reveal if you are a front-end developer or designer working on a site that already uses GSAP and want a polished, editorial scroll reveal on short headlines. Pick something else if your project does not use GSAP, or if you need animation on long paragraphs or text containing links and buttons.

Download the skill