Agent Skills
› nexu-io/motion-anything
› shimmer-button
shimmer-button
GitHub为单一主要CTA按钮添加高级光扫动画效果。纯CSS实现，支持响应式减少运动偏好，仅限单个主按钮使用，避免在次要或破坏性按钮上应用。
Trigger Scenarios
需要为唯一的主行动号召按钮增加视觉吸引力
用户希望在不引入依赖的情况下实现高端交互效果
Install
npx skills add nexu-io/motion-anything --skill shimmer-button -g -y
SKILL.md
Frontmatter
{
"od": {
"mode": "prototype",
"preview": {
"type": "html"
},
"surface": "web",
"category": "animation-motion",
"platform": "desktop",
"upstream": "https:\/\/magicui.design\/docs\/components\/shimmer-button",
"design_system": {
"requires": false
},
"example_prompt": "Use shimmer-button on the hero \"Get started\" CTA: a slow sheen that quickens on hover. Just the\none primary button; solid under reduced-motion."
},
"name": "shimmer-button",
"triggers": [
"shimmer button",
"sheen sweep cta",
"premium button",
"shiny cta",
"扫光按钮",
"高光 cta"
],
"description": "Make one primary CTA feel premium: a soft band of light sweeps across it (slowly at rest, faster on\nhover). Reserve for the single primary button; keep it subtle. Pure CSS; the sweep stops (solid\nbutton) under prefers-reduced-motion. Do not use on secondary\/destructive buttons or many at once.\n"
}
shimmer-button
A highlight that sweeps across a CTA. Part of
motion-anything; obeys MOTION-SPEC.md. Technique
popularized by Magic UI, reimplemented dependency-free (pure CSS).
When to use it
- One primary call-to-action you want to feel premium ("Get started" / "Upgrade").
When NOT to use it (restraint)
- Secondary / destructive buttons; many buttons at once (the sweep becomes noise). One per view.
How to apply
- Copy
shimmer-button.cssinto the project and link it. - Mark the button:
<button class="shimmer">Get started</button> - Tune the sweep duration (default 2.6s at rest, 1.1s on hover) and the button colors as needed.
Accessibility & performance
- Under
prefers-reduced-motionthe sweep stops; a plain solid button remains. - Animates the
transformof a masked pseudo-element only — GPU-safe.
Framework notes
- Pure CSS; works in any framework.
Version History
- b016900 Current 2026-07-11 17:10
