同一个手势，四种回应
游观是一个沉浸式水墨中国风的互动网页，鼠标划过画面时，鱼群聚拢、燕群让开、柳枝被拨开、花瓣打旋卷起，四幕各自跑一套不同的物理引擎，给出四种真正不同的自然反应。
技术构成
- Demo 链接
- 在线查看
建议在电脑端用鼠标体验。
- 平台
- Web App（React + TypeScript + Vite）
- 渲染
- Canvas 2D
- 动效
- GSAP
- Vibe Coding
- Claude Code + Codex
主要功能流程
游鱼
鼠标点击画面，鱼会跟随鼠标发生转向、加速、划出一道弧线游向落点凑食，再转身散开重新巡游。鱼的形体完全由 12 节身体链与 6 节飘带尾链每帧生成路径，不用任何位图，行波、转弯带来的弯身和摆尾快慢通过代码控制计算实现。
拂柳
当鼠标靠近柳枝时，柳枝会被自然拂开，鼠标离开后凭 Verlet 积分自带的隐式速度慢慢归位，相邻枝条共享同一层低频风场，摆动会互相影响，产生自然的拂柳的自然体验。
掠燕
在该画面中，使用了同一套 Boids 引擎放进燕群里，鼠标的语义被反过来用，它是一只闯进燕群的反影响力，半径内的燕子被强排斥推开、让出一个空腔，群体绕过去，再用零点几秒把缺口悄悄愈合。鼠标最近的移动轨迹只作为一层低权重的软引导，让整团缓慢偏移，有种与天空中的燕群发生了真实触碰感。
落花
画面中鼠标可以拨弄花枝，让花瓣摇曳落下，变成一团移动的涡旋，半径内的花瓣受到垂直于连线的切向力，再叠加一点向外的推力，花瓣会绕着鼠标转出去，而不是贴上去。加上持续的重力和横风，效果就是「被卷起、盘旋、然后继续落下」，而不是廉价粒子扑向光标。
