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

Light Trail 光轨拖尾

Mouse positions are pushed into an array and each one becomes a dot with its own remaining life. 把鼠标坐标不断塞进数组,每个点自带一条剩余寿命,边画边衰减。

Canvas 2DPoint bufferAdditive alpha
Live demo实时演示

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

How it works原理拆解

mousemove pushes {x, y, l:1}; the render loop filters out dead points, draws each with globalAlpha set to its life value, then decrements l by 0.02. The rainbow is Date.now()/5 % 360, so colour advances with real time rather than with distance travelled. mousemove 推入 {x, y, l:1};渲染循环先过滤掉 l<=0 的点,绘制时把 globalAlpha 设成 l,然后每帧减 0.02。彩虹色来自 Date.now()/5 % 360,所以颜色跟着真实时间走,而不是跟着移动距离。

What to change可以改的地方

  • 1Push only every other mousemove event — dots get sparser and the trail looks more deliberate.
  • 2Swap the hue formula for a fixed hue to get a single-colour comet instead of a rainbow.
  • 1每隔一次 mousemove 才推一个点,轨迹会变稀疏,更像刻意画的。
  • 2把色相换成固定值,就从彩虹彗星变成单色光笔。

Source code源码

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

trail.html