CARD
光标光斑卡片Spotlight Card
鼠标在哪，一圈柔光就跟到哪，边框在光斑附近微微亮起。Linear 风格的招牌交互。
效果预览
把鼠标移上来试试
一圈柔光会跟着光标移动，边框在光斑附近微微亮起——纯 CSS 变量 + mousemove 实现。
适合用在哪
功能特性网格、开发者工具官网；把鼠标交互做成"手感"的场景。
容易踩的坑
- mousemove 里直接改 left/top 且不用 requestAnimationFrame 节流，每次移动都触发重排。
- 触屏设备没有鼠标，光斑效果完全缺失，卡片需有不依赖光斑的基础视觉。
- 光斑透明度超过 25% 时盖住卡内文字，悬停时阅读反而变难。
设计提示词 · Prompt
光标光斑卡片（Spotlight Card）：在卡片上监听 mousemove，把光标相对坐标写入 CSS 变量 --mx/--my；卡片 ::before 放一个 300-400px 的径向渐变光斑（radial-gradient(circle, rgba(品牌色,.15), transparent 70%)），left/top 绑定这两个变量、translate(-50%,-50%) 居中，默认 opacity:0、悬停淡入。同时让 1px 边框颜色也跟随变量（用同一坐标叠一层更小的径向渐变做边框高光）。光斑要鼠标进入才出现、离开淡出，全程 transform-only 保证流畅。
Spotlight Card: listen for mousemove on the card and write the cursor's relative coordinates into CSS variables --mx/--my; the card's ::before holds a 300-400px radial-gradient spotlight (radial-gradient(circle, rgba(brand color,.15), transparent 70%)), with left/top bound to these two variables and centered with translate(-50%,-50%), opacity:0 by default and fading in on hover. Also make the 1px border color follow the variables (overlay a smaller radial gradient at the same coordinates as a border highlight). The spotlight appears only when the mouse enters and fades out on leave; keep everything transform-only for smoothness.
常见搭配
同一页面里经常和「光标光斑卡片」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-spot"> <b>把鼠标移上来试试</b> <span>一圈柔光会跟着光标移动，边框在光斑附近微微亮起——纯 CSS 变量 + mousemove 实现。</span> </div>