AutoGineer
Generated banner for Masked Reveal
Generated logo for Masked Reveal

Masked Reveal

Meng ToCommunityCreated by Meng To

  • Skill
  • Tool integration
  • Software development
  • MIT
  • Medium risk
Download ZIP

From the author

Create masked staggered word reveals on scroll with GSAP ScrollTrigger. Use when headings, hero copy, section titles, or editorial text should reveal word-by-word through an overflow mask as they enter the viewport.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a lightweight, dependency-conscious approach to animating text reveals using GSAP and ScrollTrigger. By programmatically splitting text into word-based spans with overflow masking, it achieves a premium editorial motion effect without requiring paid plugins. The implementation includes accessibility considerations, such as preserving the original text for screen readers, and respects user preferences for reduced motion.

What it does

  • Splits text content into individual word elements wrapped in overflow-hidden masks.
  • Uses GSAP ScrollTrigger to initiate animations as elements enter the viewport.
  • Applies a staggered vertical slide-up effect to each word.
  • Ensures accessibility by maintaining the original text structure for screen readers.
  • Provides a clean cleanup pattern for React environments.
  • Includes a fallback mechanism for users with reduced motion preferences.

When to use it

  • When you need a high-end, editorial-style reveal for hero copy or section titles.
  • When you want to avoid the overhead or cost of external text-splitting plugins.
  • When building scroll-driven interactions that require precise control over animation timing.
  • When you need to ensure animations are accessible and performant across different devices.

Advantages

  • Lightweight implementation that avoids external dependencies like SplitText.
  • Maintains semantic integrity and accessibility for screen readers.
  • Includes built-in support for reduced-motion accessibility standards.
  • Provides a robust cleanup pattern for modern SPA frameworks like React.
  • Preserves original spacing between words during the animation process.

Usage examples

“How do I implement a staggered reveal for my hero headline?”
The agent provides the HTML structure, CSS mask styles, and the GSAP initialization function to trigger the animation on scroll.
“How can I ensure this text animation works in my React application?”
The agent provides a React-specific cleanup pattern using useLayoutEffect and gsap.context to prevent memory leaks during component unmounting.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/mengto/masked-reveal/download

  2. Unzip it into the cross-client skills folder of your project:

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

Documentation by Meng To

Masked Reveal

Use When

  • A headline or short text block needs a premium reveal on scroll.

  • Words should rise through an invisible mask with a staggered sequence.

  • The project already uses GSAP or needs ScrollTrigger-based motion.

Motion Defaults

  • Trigger: start when the text top reaches 82% of the viewport.

  • Duration: 0.7s to 0.9s.

  • Stagger: 0.025s to 0.045s per word.

  • Offset: yPercent: 110 to 0.

  • Ease: power3.out or expo.out.

  • Replay: reveal once by default.

HTML

<h1 class="masked-reveal" data-masked-reveal>
  Design systems that feel alive from the first scroll.
</h1>

CSS Mask

.masked-reveal {
  visibility: visible;
}

html.js .masked-reveal[data-masked-reveal] {
  visibility: hidden;
}

html.js .masked-reveal.is-split {
  visibility: visible;
}

.masked-reveal .word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.masked-reveal .word {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html.js .masked-reveal[data-masked-reveal] {
    visibility: visible;
  }

  .masked-reveal .word {
    transform: none;
  }
}

GSAP ScrollTrigger

This helper avoids the paid SplitText plugin and keeps spaces intact.

document.documentElement.classList.add("js");
gsap.registerPlugin(ScrollTrigger);

function escapeHTML(value) {
  return value
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

function splitMaskedReveal(element) {
  if (element.dataset.maskedRevealReady === "true") return;

  const text = element.textContent.trim();
  element.setAttribute("aria-label", text);
  element.innerHTML = text
    .split(/(\s+)/)
    .map((part) => {
      if (!part.trim()) return part;
      return `<span class="word-mask" aria-hidden="true"><span class="word">${escapeHTML(part)}</span></span>`;
    })
    .join("");
  element.dataset.maskedRevealReady = "true";
  element.classList.add("is-split");
}

function initMaskedReveals(selector = "[data-masked-reveal]") {
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

  document.querySelectorAll(selector).forEach((element) => {
    splitMaskedReveal(element);
    const words = element.querySelectorAll(".word");

    gsap.set(element, { autoAlpha: 1 });
    gsap.fromTo(
      words,
      { yPercent: 110 },
      {
        yPercent: 0,
        duration: 0.8,
        ease: "power3.out",
        stagger: 0.035,
        scrollTrigger: {
          trigger: element,
          start: "top 82%",
          once: true,
        },
      }
    );
  });
}

initMaskedReveals();

React Cleanup Pattern

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    initMaskedReveals("[data-masked-reveal]");
  }, rootRef);

  return () => ctx.revert();
}, []);

Taste Rules

  • Use on short headlines, labels, and section intros; avoid long paragraphs.

  • Keep the vertical offset clean. Do not combine with blur unless the style explicitly calls for it.

  • Stagger by word, not letter, for a calmer editorial feel.

  • Initialize after fonts are loaded if line wrapping is critical.

  • Use ScrollTrigger.refresh() after late-loading images or layout shifts.

  • Do not split text that contains links, buttons, or meaningful inline markup.

Quick Checks

  • Text is hidden before GSAP initializes, then becomes visible with autoAlpha: 1.

  • Screen readers get the original full text through aria-label.

  • Spaces between words are preserved.

  • Reduced-motion users see static text.

  • ScrollTrigger is cleaned up in SPA routes.

Files

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

What our scanner noticed· Medium risk

  • Large base64-encoded blobs

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/masked-reveal · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download masked-reveal.zip