Frontend & UI
Masked Reveal
Reveal headlines word by word through an overflow mask on scroll.
What it is
A GSAP ScrollTrigger pattern that splits a heading into masked word spans and staggers them upward as the text enters the viewport. Includes a React cleanup pattern.
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.
Why it matters for design
- Word-level stagger reads calmer and more editorial than letter-level animation.
- Screen readers still get the full text through an aria-label.
- Reduced-motion users see static text with no transform applied.
What it covers
- Use when
- Motion defaults
- CSS mask
- GSAP ScrollTrigger
- React cleanup pattern
- Quick checks
How to install
Masked Reveal
-
Clone the repo.
git clone https://github.com/MengTo/Skills -
Point Codex at the skill file.
agent-skills/web-design/masked-reveal/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Mark a heading with data-masked-reveal and add the CSS mask rules.
-
Call the split helper, which avoids the paid SplitText plugin.
-
Wrap in a GSAP context in React so ScrollTrigger cleans up on route change.
Every plugin here is free, open source, and links to its real upstream source.
More on the codex-design list ↗More Codex design plugins
Frontend & UI What it does gpt-taste Builds award-style landing pages with GSAP scroll motion and gapless bento grids. 
Design Systems What it does Stitch Design Taste Writes a DESIGN.md that steers Google Stitch toward non-generic screens. 
Frontend & UI What it does image-to-code Generates design images first, analyzes them, then builds matching frontend code. 
Frontend & UI What it does imagegen-frontend-mobile Generates premium mobile app screen flows as images, not code. Next step
Design with Open Design, without the setup
Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.