菜单
Reveal content as it scrolls into view — a gentle rise + fade, once per element. Use to give a long page calm rhythm. Honors prefers-reduced-motion and supports staggering. Do not delay above-the-fold content, and keep at most a few elements animating at once.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/nexu-io/motion-anything --skill scroll-reveal命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | scroll-reveal |
| description | Reveal content as it scrolls into view — a gentle rise + fade, once per element. Use to give a long page calm rhythm. Honors prefers-reduced-motion and supports staggering. Do not delay above-the-fold content, and keep at most a few elements animating at once. |
| triggers | ["reveal on scroll","fade in on scroll","scroll animation","elegant entrance","滚动出现","高级感"] |
| od | {"mode":"prototype","surface":"web","platform":"desktop","category":"animation-motion","upstream":null,"preview":{"type":"html"},"design_system":{"requires":false},"example_prompt":"Use scroll-reveal on the content sections of this page: a gentle rise+fade as each enters\nthe viewport, staggered, with a prefers-reduced-motion fallback. Leave the hero visible instantly.\n"} |
A gentle rise + fade as elements scroll into view. Part of
motion-anything; obeys MOTION-SPEC.md.
scroll-reveal.css and scroll-reveal.js into the project, and link them.<section data-reveal>…</section>
<li data-reveal data-reveal-delay="80">…</li> <!-- optional stagger, ms -->
.is-in once, when the element enters the viewport.prefers-reduced-motion: everything is shown immediately, no travel.transform/opacity only; unobserves each element after it reveals.data-reveal attributes and run the init (or an equivalent useEffect +
IntersectionObserver) after mount.