网页光照实验
一、黑暗是舞台
聚光效果的本质不是「加光」，而是「先让一切暗下去」。整页覆盖一层半透明遮罩， 只在光源附近开一个洞——洞里是内容，洞外是夜色。观众的注意力会自己走向那束光。
所谓 Dark mode，是让界面变暗；所谓 Spot mode，是让世界只剩一盏灯。
手电筒模式下光斑跟随鼠标移动，带一点惯性缓动，像真的在黑暗里挥动手电。 台灯模式则在页面上放一盏可以拖动的灯，光锥朝向你的指针，有真实的束长与张角。
二、光的质量
暖光让文字像被烛光照亮，冷光让页面像深海探照。色温是氛围的第一杠杆。
焦点圆（Focal Circle）：光斑中心的小圆环，半径 60–220px 可调，
辉光强度决定它「呼吸感」的强弱。
光束（Beam）：从光源出发的锥形渐变，长度 200–600px、张角 10°–45°。
光束不是往文字上「叠光」，而是从遮罩上「抠光」——被照到的区域只是没那么暗，文字始终可读。
三、锁定与导览
点击任意标题，一圈流动的虚线光盒会把整个标题框住， 其余部分沉入更深的黑暗，附上「已锁定」标签——这就是导览（Tour）的雏形。 解谜类页面用它做「照亮线索」，产品页用它做「逐段讲解」。
滚动页面时，锁定的光盒会平滑跟随元素移动；按 ESC 或点击空白处解除锁定。
四、性能备忘
遮罩用单层 canvas 绘制，每帧只做一次 radial-gradient 的 destination-out， 配合 requestAnimationFrame，60fps 无压力。光斑位置用 lerp 平滑， 避免鼠标原始坐标的抖动。