✨Effect Lab
Read the full guide完整技术长文 Treating the pointer as a signal, not an event把指针当作信号,而不是事件
👀

Following Eyes 跟随的眼睛

Five pupils that track the cursor, each offset 10px along its own line of sight. 五只瞳孔跟着鼠标转,各自沿视线方向偏移 10px。

DOMMath.atan2Pupil offset
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

The trick is atan2: for every eye the code computes the angle from the eye's centre to the mouse, then places the pupil at cos(angle)*10 and sin(angle)*10 from its resting position. Because the offset is a fixed radius, the pupil slides around the inside of the eyeball instead of pointing at the cursor directly. 关键是 atan2:对每只眼睛算出从眼心到鼠标的角度,再把瞳孔放到 cos(角度)*10、sin(角度)*10 的位置。因为偏移半径固定,瞳孔是在眼白内侧绕圈,而不是直接指向鼠标。

What to change可以改的地方

  • 1Raise the radius to 16 for a wider, more cartoonish look.
  • 2Add a small random jitter so the eyes occasionally glance away.
  • 1半径调到 16,会更卡通、更夸张。
  • 2加一点随机抖动,眼睛就会偶尔瞟开,显得有神。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

eyes.html