会跟着你走的光

一束不照亮任何东西的光

做这个站点的时候，我先写的不是路由，也不是数据库，而是一个跟随鼠标移动的柔光层。

它不承担任何功能。它不会替你点击按钮，不会告诉你哪里可以点。它只是在你移动的时候，慢慢跟上来，像夜里房间里被你带着走的一点点余光。

技术实现其实很朴素：一个固定定位的 div，尺寸 520px，里面是径向渐变，透明度低到几乎看不见。用 requestAnimationFrame 做缓动，让它的坐标以 0.12 的系数逼近鼠标位置。

const lerp = (a: number, b: number, t: number) => a + (b - a) * t;

function tick() {
  x = lerp(x, target.x, 0.12);
  y = lerp(y, target.y, 0.12);
  glow.style.transform = `translate3d(${x - 260}px, ${y - 260}px, 0)`;
}

系数越小，光就越"重"。0.12 是我试了十几次之后比较满意的一个值：不会甩尾，也不会木讷。

为什么要在意这些没用的东西

因为一个个人博客，最不需要的就是效率。

我们平时用的产品都在争夺注意力：红点、角标、无限滚动。而一个自己的站点，可以反过来做——它可以用一层几乎看不见的光，请你在原地停一会儿。

所以这里的每一处动效都遵循同一个原则：慢、轻、后知后觉。滚动时内容不会弹进来，而是像被推开的窗帘一样，缓缓落定。

如果你用的是手机，这束光会关掉，换成一圈极缓的呼吸渐变。因为手指会挡住它，没有必要。

一点小彩蛋

试着把鼠标停在标题上三秒。字会有一点点偏移，像被光照得微微抬起。

这个彩蛋只写了一行 CSS：transition: letter-spacing 1.2s cubic-bezier(.16,1,.3,1)，hover 的时候把字距加宽 0.02em。

小到几乎看不出来。但你能感觉到。