Agent Skills
› nexu-io/motion-anything
› spotlight-card
spotlight-card
GitHub为卡片添加跟随光标的径向聚光灯特效，提升视觉质感。适用于功能或定价卡片，避免用于文字密集区域。自动适配触摸设备和减少动画偏好，性能友好且无依赖。
Trigger Scenarios
需要为功能、定价或网格卡片添加高级交互效果
实现光标跟随的微妙发光边框以提升视觉吸引力
Install
npx skills add nexu-io/motion-anything --skill spotlight-card -g -y
SKILL.md
Frontmatter
{
"od": {
"mode": "prototype",
"preview": {
"type": "html"
},
"surface": "web",
"category": "animation-motion",
"platform": "desktop",
"upstream": "https:\/\/ui.aceternity.com\/components\/card-spotlight",
"design_system": {
"requires": false
},
"example_prompt": "Use spotlight-card on the feature grid: a soft spotlight follows the cursor and the border\nlifts. Keep it subtle; static under reduced-motion and on touch."
},
"name": "spotlight-card",
"triggers": [
"spotlight card",
"cursor glow card",
"premium hover card",
"card that lights up on hover",
"光斑跟随卡片",
"卡片高光"
],
"description": "Give feature\/pricing cards a premium feel: a soft radial spotlight follows the cursor across the\ncard and lifts its border. Keep the glow subtle and low-contrast. Falls back to a plain static\nborder under prefers-reduced-motion and on touch. Do not use on text-dense reading surfaces.\n"
}
spotlight-card
A radial spotlight that follows the cursor across a card. Part of
motion-anything; obeys MOTION-SPEC.md. Technique
popularized by Aceternity UI, reimplemented dependency-free.
When to use it
- Feature cards, pricing tiles, or a card grid where one should light up under the pointer.
When NOT to use it (restraint)
- Text-dense reading surfaces — the glow distracts. Keep it low-contrast and subtle.
- Touch-only contexts — there is no cursor; it falls back to a static border automatically.
How to apply
- Copy
spotlight-card.cssandspotlight-card.jsinto the project, and link them. - Mark the card:
<div class="spotlight"> … </div> - Auto-attaches to
.spotlight. JS writes--mx/--my; the CSS paints the glow there.
Accessibility & performance
- Disabled under
prefers-reduced-motionand on(hover: none)touch devices (static border stays). - Paints a radial-gradient only — no layout thrash.
Framework notes
- React: call
attachSpotlight(ref.current)inuseEffect, guarded by the same checks.
Version History
- b016900 Current 2026-07-11 17:10
