用途:为功能卡、定价卡或卡片网格添加跟随光标的径向聚光效果,让指针下的卡片亮起,营造高级感。该技术由 Aceternity UI 推广,此处为无依赖重实现,属于 motion-anything 项目并遵循 MOTION-SPEC.md。
主要能力:JS 写入 --mx/--my 变量,CSS 在这些位置绘制径向渐变光晕,同时提亮卡片边框;仅绘制 radial-gradient,不触发布局抖动。
使用方式:将 spotlight-card.css 与 spotlight-card.js 复制进项目并引入;给卡片加上 class="spotlight",脚本会自动挂载到 .spotlight 元素。React 中可在 useEffect 内调用 attachSpotlight(ref.current),并加上同样的条件判断。
适用场景:功能卡、定价卡、卡片网格等需要指针交互反馈的界面。
限制与注意:不适合文字密集的阅读界面,光晕会分散注意力,应保持低对比、克制使用;纯触屏环境没有光标,会自动回退为静态边框;在 prefers-reduced-motion 以及 (hover: none) 触屏设备下禁用动效,静态边框保留。
资料未提供具体安装命令、版本、收费与平台信息。