✨Effect Lab
Read the full guide完整技术长文 When text stops being text当文字不再是文字
🔤

Text Particles 文字粒子

The text is drawn off-screen, its pixels read back, and every opaque pixel becomes a particle target. 文字先画在一块看不见的画布上,把像素读回来,每个不透明的像素点变成一个粒子的目标位置。

Canvas 2DgetImageDataSample grid
Live demo实时演示

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 文件就能跑,不需要任何库。

textparticles.html