这是什么
一个 GSAP ScrollTrigger 方案：把标题拆成带遮罩的词块，文字进入视口时逐词错峰上移。附带一套 React 清理写法。
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.
它对设计意味着什么
- 逐词错峰比逐字母动画更沉稳，更有编辑气质。
- 屏幕阅读器仍能通过 aria-label 读到完整文字。
- 开了减弱动效的用户看到的是静态文字，不加任何变换。
包含哪些内容
- Use when
- Motion defaults
- CSS mask
- GSAP ScrollTrigger
- React cleanup pattern
- Quick checks
如何安装
Masked Reveal
-
克隆这个仓库。
git clone https://github.com/MengTo/Skills -
把 Codex 指向这个 Skill 文件。
agent-skills/web-design/masked-reveal/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
给标题加上 data-masked-reveal，再补上 CSS 遮罩规则。
-
调用自带的拆分助手，绕开收费的 SplitText 插件。
-
在 React 里用 GSAP context 包起来，路由切换时 ScrollTrigger 会自动清理。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。