Agent Skills
› nexu-io/motion-anything
› shine-border
shine-border
GitHub纯CSS实现的光晕边框动画，用于为单个英雄卡片或CTA增添精致动态效果。支持通过CSS变量自定义颜色、宽度和时长，符合无障碍规范，在减少动态偏好下自动降级为静态边框，确保性能与视觉克制。
Trigger Scenarios
需要为单个Hero卡片或CTA按钮添加微妙的动态光效
希望提升推荐模块或重点内容的视觉吸引力但保持页面安静
Install
npx skills add nexu-io/motion-anything --skill shine-border -g -y
SKILL.md
Frontmatter
{
"od": {
"mode": "prototype",
"preview": {
"type": "html"
},
"surface": "web",
"category": "animation-motion",
"platform": "desktop",
"upstream": "https:\/\/magicui.design\/docs\/components\/shine-border",
"design_system": {
"requires": false
},
"example_prompt": "Use shine-border on the \"recommended\" pricing tier: one slow light travels the border. Just\nthat one card; static under reduced-motion."
},
"name": "shine-border",
"triggers": [
"shine border",
"animated border",
"glowing outline",
"premium featured card",
"流光边框",
"扫光描边"
],
"description": "Give one hero card or CTA quiet premium life: a soft band of light travels around its border.\nOne shining element per view; keep it slow and low-contrast. Pure CSS. Fully static under\nprefers-reduced-motion. Do not put several on screen at once.\n"
}
shine-border
A light that travels around an element's border. Part of
motion-anything; obeys MOTION-SPEC.md. Technique
popularized by Magic UI, reimplemented dependency-free (pure CSS).
When to use it
- A single hero card / CTA / "recommended" tier you want to feel alive as it sits on screen.
When NOT to use it (restraint)
- Multiple elements at once — competing lights become noise. One per view.
- Calm / serious content, or anything already animating strongly nearby.
How to apply
- Copy
shine-border.cssinto the project and link it. - Mark the element:
<div class="shine"> … </div> - Tune with CSS vars:
--shine-color,--shine-width, and the animation duration (default 4s).
Accessibility & performance
- Under
prefers-reduced-motionthe light stops and a plain static border remains. - Animates a masked conic-gradient (via
@property --shine-angle) — compositor-friendly.
Framework notes
- Works as-is in any framework; it is pure CSS. Scope
--shine-*per component as needed.
Version History
- b016900 Current 2026-07-11 17:10
