这是根据截图复刻的 Letter Badges 交互 demo:鼠标进入画布后控制黑色小生物,彩色字母徽章会被推开,并在离开后弹回。

移动端没有鼠标时,小生物会自动游走。远处的徽章以灰色描边显示,靠近小生物时变成彩色实心圆,并参与斥力、阻尼、中心引力和软边界运动。

这个版本把 badge 当成独立粒子处理:每个粒子都有自己的速度、旋转、随机漂移方向和柔性边界回弹。小生物靠近时只改变局部区域的颜色和速度,所以画面会保留教程截图里那种“局部被扰动、整体仍在缓慢流动”的感觉。

在新窗口打开