Agent Skills
› nexu-io/motion-anything
› fade-in-up
fade-in-up
GitHub用于页面加载时让关键元素（如Hero内容）上升并淡入，支持交错动画。尊重用户减少动态偏好设置，适用于少量重要元素，避免延迟核心内容或用于长列表。
Trigger Scenarios
页面首屏关键内容展示
需要轻微入场动画的标题或组件
Install
npx skills add nexu-io/motion-anything --skill fade-in-up -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 fade-in-up on the hero: rise + fade the eyebrow, headline, subhead and CTA in a short\nstagger, with a prefers-reduced-motion fallback."
},
"name": "fade-in-up",
"triggers": [
"fade in",
"entrance animation",
"appear smoothly",
"入场动效",
"优雅出现"
],
"description": "Rise + fade key elements in as the page loads, optionally staggered. Use for hero content and\na small group of important elements. Honors prefers-reduced-motion. For long lists or off-screen\ncontent use scroll-reveal instead; never delay must-read content by more than a moment.\n"
}
fade-in-up
A clean rise + fade entrance, on load. Part of
motion-anything; obeys MOTION-SPEC.md.
When to use it
- Hero content and a few key elements appearing on first paint.
When NOT to use it (restraint)
- Long lists / off-screen content — use
scroll-reveal. - Don't delay must-read content by more than ~300ms; keep to ≤3 staggered elements.
How to apply
- Copy
fade-in-up.cssandfade-in-up.jsand link them. - Mark elements:
<h1 data-fade>…</h1>(optionaldata-fade-delay="80"; auto-staggers otherwise).
Accessibility & performance
prefers-reduced-motion: shown immediately. Transform/opacity only.
Version History
- b016900 Current 2026-07-11 17:08
