菜单
Give feature/pricing cards a premium feel: a soft radial spotlight follows the cursor across the card and lifts its border. Keep the glow subtle and low-contrast. Falls back to a plain static border under prefers-reduced-motion and on touch. Do not use on text-dense reading surfaces.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/nexu-io/motion-anything --skill spotlight-card命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Fade Big — a composable AnimXYZ entrance via the xyz="fade big-50%" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.
Fade Down — a composable AnimXYZ entrance via the xyz="fade down-3" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.
Fade Left — a composable AnimXYZ entrance via the xyz="fade left-3" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.
基于 SOC 职业分类
正在显示 SKILL.md
| name | spotlight-card |
| description | Give feature/pricing cards a premium feel: a soft radial spotlight follows the cursor across the card and lifts its border. Keep the glow subtle and low-contrast. Falls back to a plain static border under prefers-reduced-motion and on touch. Do not use on text-dense reading surfaces. |
| triggers | ["spotlight card","cursor glow card","premium hover card","card that lights up on hover","光斑跟随卡片","卡片高光"] |
| od | {"mode":"prototype","surface":"web","platform":"desktop","category":"animation-motion","upstream":"https://ui.aceternity.com/components/card-spotlight","preview":{"type":"html"},"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.\n"} |
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.
spotlight-card.css and spotlight-card.js into the project, and link them.<div class="spotlight"> … </div>
.spotlight. JS writes --mx/--my; the CSS paints the glow there.prefers-reduced-motion and on (hover: none) touch devices (static border stays).attachSpotlight(ref.current) in useEffect, guarded by the same checks.