Agent Skills
› nexu-io/motion-anything
› scroll-reveal
scroll-reveal
GitHub为长页面提供滚动进入视口时的上升淡入动画，营造舒缓节奏。支持交错延迟、尊重无障碍设置，仅对首屏以下元素生效，避免同时过多动画。
触发场景
需要为长落地页或堆叠内容添加滚动入场动画
希望页面呈现舒缓的节奏感
安装
npx skills add nexu-io/motion-anything --skill scroll-reveal -g -y
SKILL.md
Frontmatter
{
"od": {
"mode": "prototype",
"preview": {
"type": "html"
},
"surface": "web",
"category": "animation-motion",
"platform": "desktop",
"upstream": null,
"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."
},
"name": "scroll-reveal",
"triggers": [
"reveal on scroll",
"fade in on scroll",
"scroll animation",
"elegant entrance",
"滚动出现",
"高级感"
],
"description": "Reveal content as it scrolls into view — a gentle rise + fade, once per element. Use to give a\nlong page calm rhythm. Honors prefers-reduced-motion and supports staggering. Do not delay\nabove-the-fold content, and keep at most a few elements animating at once.\n"
}
scroll-reveal
A gentle rise + fade as elements scroll into view. Part of
motion-anything; obeys MOTION-SPEC.md.
When to use it
- Long landing pages and stacked content sections.
- Giving a page a calm sense of pace.
When NOT to use it (restraint)
- Above-the-fold hero content the reader must see instantly.
- Revealing many elements simultaneously — stagger them, max ~3 at once.
How to apply
- Copy
scroll-reveal.cssandscroll-reveal.jsinto the project, and link them. - Mark elements:
<section data-reveal>…</section> <li data-reveal data-reveal-delay="80">…</li> <!-- optional stagger, ms --> - An IntersectionObserver adds
.is-inonce, when the element enters the viewport.
Accessibility & performance
prefers-reduced-motion: everything is shown immediately, no travel.- Animates
transform/opacityonly; unobserves each element after it reveals.
Framework notes
- React: render
data-revealattributes and run the init (or an equivalentuseEffect+ IntersectionObserver) after mount.
版本历史
- b016900 当前 2026-07-11 17:10
