Agent Skills
› nexu-io/motion-anything
› border-beam
border-beam
GitHub为单个卡片或CTA添加沿边框移动的亮色光晕特效。纯CSS实现，遵循无障碍规范，支持自定义颜色和速度。建议每视图仅使用一次，避免视觉干扰，适用于强调“新”或“精选”元素。
Trigger Scenarios
需要突出显示单个新功能或特色卡片
为英雄区域的主要行动号召按钮添加动态吸引力
Install
npx skills add nexu-io/motion-anything --skill border-beam -g -y
SKILL.md
Frontmatter
{
"od": {
"mode": "prototype",
"preview": {
"type": "html"
},
"surface": "web",
"category": "animation-motion",
"platform": "desktop",
"upstream": "https:\/\/magicui.design\/docs\/components\/border-beam",
"design_system": {
"requires": false
},
"example_prompt": "Use border-beam on the \"New\" feature card: a small bright comet travels the border. Just that one\ncard; static under reduced-motion."
},
"name": "border-beam",
"triggers": [
"border beam",
"traveling light border",
"comet border",
"animated outline accent",
"边框光点",
"环绕流光"
],
"description": "Give one card or CTA a lively accent: a small bright comet of light travels around its border.\nBrighter\/livelier than shine-border — use for a single \"new\"\/\"featured\" element, one per view.\nPure CSS; fully static under prefers-reduced-motion.\n"
}
border-beam
A bright comet that travels 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 "new" / "featured" card or a hero CTA that should feel lively for a beat.
When NOT to use it (restraint)
- Several at once (competing beams = noise). One per view.
- Calm/serious contexts — or when a quieter full-border glow fits: use shine-border instead.
How to apply
- Copy
border-beam.cssinto the project and link it. - Mark the element:
<div class="beam"> … </div> - Tune
--beam-color,--beam-size, and the animation duration (default 3s).
Accessibility & performance
- Under
prefers-reduced-motionthe beam stops; a plain static border remains. - Animates a masked conic-gradient (via
@property --beam-angle) — compositor-friendly.
Framework notes
- Pure CSS; works in any framework. Scope
--beam-*per component.
Version History
- b016900 Current 2026-07-11 17:07
