Agent Skills
› nexu-io/motion-anything
› stagger-list
stagger-list
GitHub实现列表项依次上升淡入的交错动画效果，适用于首屏短列表或菜单。支持 prefers-reduced-motion 无障碍设置，限制总时长约600ms，长列表应改用滚动揭示。
触发场景
需要为短列表添加入场动画
前端 UI 动效开发
安装
npx skills add nexu-io/motion-anything --skill stagger-list -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 stagger-list on the feature list: rise + fade each item in on load, ~70ms apart, finishing\nquickly, with a prefers-reduced-motion fallback. Short list only."
},
"name": "stagger-list",
"triggers": [
"stagger list",
"items appear one by one",
"sequence in",
"列表逐项入场",
"依次出现"
],
"description": "Rise + fade list items in one after another on load, staggered by order. Use for short,\nabove-the-fold lists, menus, or nav. Honors prefers-reduced-motion. For long or off-screen lists\nuse scroll-reveal instead; never gate must-scan content on the animation.\n"
}
stagger-list
List items rise + fade in, one after another. Part of
motion-anything; obeys MOTION-SPEC.md.
When to use it
- Short above-the-fold lists, menus, nav items, or a dropdown opening.
When NOT to use it (restraint)
- Long / off-screen lists — use
scroll-reveal. Keep the whole sequence under ~600ms.
How to apply
- Copy
stagger-list.cssandstagger-list.jsand link them. - Wrap items:
<ul data-stagger>…</ul>(optionaldata-stagger-step="70").
Accessibility & performance
prefers-reduced-motion: shown immediately. Transform/opacity only.
版本历史
- b016900 当前 2026-07-11 17:10
