V-05

光晕聚光

Spotlight Glow

一块柔光跟着指针在卡片表面移动，像有人拿手电照上去。

又叫：
聚光灯
鼠标光晕
光标跟随光
spotlight card
cursor glow
radial highlight

展厅: 视觉质感
形态: 指针交互
播放: 手动触发
关键词: 需要 JS / 浏览器 API / 渐变 / 滤镜与混合 / 主线程每帧 / 只能指针操作

↕ 自己动手试试

V-05形态指针交互播放手动触发Spotlight Glow

参数工作台

光斑半径220px直径是它的两倍；小于 150px 像激光笔，越大越像氛围光峰值不透明度22%拖到 0 光完全消失，能对比「高亮」和「变白」的区别光斑色相40deg40deg 偏暖像台灯，220deg 偏蓝像屏幕反光跟随指针

复制给 AI

随参数实时更新

做卡片聚光（spotlight glow）：卡片 overflow: hidden，里面放一个 440px 的圆形光斑，背景 radial-gradient(circle, hsla(40, 95%, 70%, 0.22) 0%, hsla(40, 95%, 70%, 0) 70%)，mix-blend-mode: screen，pointer-events: none。用 pointermove 把指针坐标换算成光斑的 transform: translate3d()，直接改元素 style 不要 setState，并加 120ms 的 transform 过渡；指针移出回到卡片中心。默认位置就要好看，因为触屏没有 hover。

什么时候用

深色卡片想让用户意识到鼠标正停在这里，比整块变色更有空间感
定价卡、功能卡里突出「正在看的那一张」
Hero 区要一束光追着指针走，给静态页面一点氛围
按钮的 hover 高亮想含蓄一点，用一层径向光代替纯色填充

适用场景：卡片 / 按钮 / 页面

别搞混

和「box-shadow 阴影」的区别
box-shadow 是元素轮廓外的一圈均匀柔光，跟着盒子形状走，不会移动；聚光光晕是一个有圆心坐标的光斑，位置随指针变。
和「hover 换底色」的区别
hover 是把整块背景色换掉，边界是硬切；聚光有衰减，越靠圆心越亮，越往外越淡。
和「跟随指针的拖尾」的区别
拖尾装饰的是鼠标本身，跟着指针满屏幕跑；聚光被裁在元素内部（overflow: hidden 或 mask），是打在表面的一层。

容易踩的坑

别在 pointermove 里 setState，一帧多次重渲染会卡；把坐标直接写进元素的 style.transform 或 CSS 变量
光斑要 overflow: hidden 裁在卡片里，否则看起来是飘在旁边的一个圆
触屏没有 hover，必须给一个默认居中或居下的静态光斑，否则移动端一片死黑
光太亮会把内容吃掉，峰值不透明度 0.10–0.25 就够，配 mix-blend-mode: screen 或 soft-light
在长条卡片上用百分比尺寸算光斑会被拉成椭圆，改用固定 px 直径
pointermove 里每次都读 getBoundingClientRect 会触发布局，缓存 rect 或只在 resize 时更新

无障碍降级

光斑是直接改 transform，本来就没有缓动；prefers-reduced-motion: reduce 下把 transform 的 transition 去掉，光斑瞬间跳到指针位置，不再有跟不上的拖影。

关键词

radial-gradient
pointermove
CSS custom properties
transform: translate3d
mix-blend-mode: screen
overflow: hidden
spotlight card