Text Particles 文字粒子
The text is drawn off-screen, its pixels read back, and every opaque pixel becomes a particle target. 文字先画在一块看不见的画布上,把像素读回来,每个不透明的像素点变成一个粒子的目标位置。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
A hidden canvas renders the string, then getImageData is sampled on a 5px grid looking only at the alpha channel. Each surviving sample becomes a target coordinate that particles ease toward with x += (tx-x)*0.08. That 0.08 lerp is why they converge rather than snap. 用一个隐藏 canvas 渲染文字,然后 getImageData 按 5px 网格采样,只看 alpha 通道。留下的每个采样点成为目标坐标,粒子用 x += (tx-x)*0.08 逼近。0.08 这个插值系数,就是它们会「汇聚」而不是「瞬移」的原因。
What to change可以改的地方
- 1Sample every 3px for more particles and a sharper logo, every 8px for a lighter one.
- 2Raise the lerp to 0.2 so the letters assemble faster and lose the drift.
- 1改成 3px 采样,粒子更多、字形更锐利;8px 则更轻。
- 2插值提到 0.2,字会拼得更快,但也失去那种飘的感觉。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。