Spotlight 聚光灯
A black overlay with a transparent hole, moved by writing two CSS variables from mousemove. 一层黑色遮罩中间挖个透明洞，靠 mousemove 写两个 CSS 变量来移动。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
The mask is a radial-gradient whose centre is var(--x) var(--y), fully transparent for the first 55px then opaque black by 120px. The handler only calls style.setProperty on those two variables — no reflow-triggering layout reads, no canvas. The soft edge is the gradient's 55–120px transition band. 遮罩是一个径向渐变，圆心是 var(--x) var(--y)，前 55px 完全透明，到 120px 变成不透明黑。处理函数只在样式上 setProperty 这两个变量——不触发重排、不用 Canvas。边缘的柔化就是 55–120px 这段过渡带。
What to change可以改的地方
- 1Shrink the 120px stop for a hard-edged torch; widen it for a soft glow.
- 2Animate the hole size on click for a zoom-in reveal.
- 1120px 收小，就变成硬边的手电筒；放大则更柔。
- 2点击时让洞的大小动一下，就有了「拉近」的揭示感。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑，不需要任何库。