星空穿越
粒子3D 星点向屏幕飞入，带透视拖尾，鼠标位置就是消失点。
Canvas 2D透视投影拖尾
PARTICLE & BACKGROUND LAB
粒子与背景特效库
11 个纯前端动效，全部是 Canvas / WebGL 实时算出来的，没有 GIF、没有视频、没有依赖。 挑一个喜欢的，直接下载成单文件 HTML 拿去用；下面的配色、速度、密度对所有预览同时生效。
把鼠标移到预览上，效果会跟着动
流场粒子
粒子几千个粒子沿噪声流场游走，鼠标像一块磁铁把轨迹推开。
Canvas 2D噪声流场长拖尾
粒子文字
粒子把字形的像素当成目标点，粒子用弹簧靠过去，鼠标能把它们吹散。
Canvas 2D字形采样弹簧运动
星轨环绕
粒子粒子按不同半径分层绕行，圆心的位置跟着鼠标缓动。
Canvas 2D轨道运动鼠标跟随
萤火微光
粒子柔光精灵图叠加成呼吸的萤火，鼠标附近的光点会被吸过来。
Canvas 2D精灵图呼吸光效
星座网络
粒子漂浮的节点彼此连线，离得越近线越亮，鼠标会牵动附近的节点。
Canvas 2D邻近连线鼠标牵引
极光星云
背景片元着色器里叠五层噪声再做域扭曲，鼠标会改变扭曲方向。
WebGL域扭曲噪声fbm
液态波纹
背景多组正弦波相互干涉出液态质感，指针附近会隆起一圈涟漪。
WebGL波干涉指针涟漪
流动光斑
背景几团大光斑缓慢漂浮相互叠加，是最省电的那种氛围背景。
Canvas 2D径向渐变叠加混色
赛博网格
背景透视网格向着地平线收束并不断后退，适合做科技感的页头。
Canvas 2D透视网格Retro
漩涡星尘
粒子粒子被卷入缓慢旋转的漩涡，越靠近中心转得越快。
Canvas 2D极坐标鼠标扰动
单文件交付
下载到的就是一个 .html，双击就能开，没有 CDN、没有构建、没有依赖，配色和参数已经按你调好的写进去了。
实时计算
Canvas 2D 与 WebGL 片元着色器实时渲染，尺寸变化自动适配，页面不可见时自动暂停，系统开了「减少动态效果」时只画一帧。
怎么接进项目
把 canvas 放到自己想放的容器里、去掉样式里的 fixed 定位即可；背景类效果适合做首屏，粒子类适合做点缀。
BitLeap · 本地计算 · 隐私优先