一次对 remix.run 背景动画的技术拆解与重做
三万个点,六种形状。
背后是 Three.js 加一段自定义 shader:同一批粒子跟着滚动位置,在赛道、赛车、跑者和界面卡片之间连续变形。
同一批粒子,换一个形状
从赛道长出一辆车
滚动的时候,组成路面的点不会消失,它们被重新排布成了车身的轮廓。形变,不是切换
赛车变成了跑者
每一帧都在两个姿态之间做插值,所以过程是连续的,不是硬切。换个机位看同一辆车
凑近看引擎舱
同一份点云,相机挪到车尾附近,细节的密度感会完全不一样。从物体到界面
点云也能拼出卡片
粒子聚成几片悬浮的矩形轮廓,像是把界面草稿画在了空气里。回到路上