Agent Skills
› nexu-io/motion-anything
› count-up
count-up
GitHub用于在元素进入视口时动画递增数字，突出显示统计或指标数据。尊重减少运动偏好设置，避免在需要精确读取数值或同时使用多个计数器时启用此功能。
Trigger Scenarios
展示单个引人注目的统计数据或指标
需要将用户注意力吸引到特定数值上
Install
npx skills add nexu-io/motion-anything --skill count-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 count-up on the stats row: animate each number up to its target when the section enters\nthe viewport, with thousands separators and a prefers-reduced-motion fallback."
},
"name": "count-up",
"triggers": [
"count up",
"animated number",
"stat counter",
"数字滚动",
"数据强调"
],
"description": "Animate a number counting up to its target as it scrolls into view, once. Use for stat\/metric\nblocks to draw the eye to an impressive figure. Honors prefers-reduced-motion (final value shown\ninstantly). Avoid for precise values the user must read while animating, or many counters at once.\n"
}
count-up
A number that animates up to its target on enter. Part of
motion-anything; obeys MOTION-SPEC.md.
When to use it
- Stat / metric blocks; drawing the eye to one impressive figure.
When NOT to use it (restraint)
- Precise values the reader must read exactly mid-animation.
- Many counters firing at once — pick the one that matters.
How to apply
- Copy
count-up.cssandcount-up.jsand link them. - Mark numbers:
<span data-count="10000" data-count-suffix="+">0</span>(optionaldata-count-prefix="$",data-count-duration="900").
Accessibility & performance
prefers-reduced-motion: final value shown immediately. Tabular figures keep width steady.
Version History
- b016900 Current 2026-07-11 17:07
