Agent Skills › nexu-io/motion-anything › spotlight-card

spotlight-card

GitHub

为卡片元素添加跟随鼠标的径向聚光灯特效，提升视觉质感。支持触屏降级和减少动画偏好设置，确保无障碍与性能。适用于功能卡或定价模块，避免用于密集文本区域。

recipes/web/spotlight-card/SKILL.md nexu-io/motion-anything

触发场景

需要为UI卡片添加鼠标跟随光效实现高对比度或低对比度的交互反馈效果

安装

npx skills add nexu-io/motion-anything --skill spotlight-card -g -y

更多选项

非标准路径

npx skills add https://github.com/nexu-io/motion-anything/tree/main/recipes/web/spotlight-card -g -y

不安装直接使用

npx skills use nexu-io/motion-anything@spotlight-card

指定 Agent (Claude Code)

npx skills add nexu-io/motion-anything --skill spotlight-card -a claude-code -g -y

安装 repo 全部 skill

npx skills add nexu-io/motion-anything --all -g -y

预览 repo 内 skill

npx skills add nexu-io/motion-anything --list

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.css and spotlight-card.js into 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.