✨Effect Lab
Read the full guide完整技术长文 A particle is four numbers and a deadline粒子就是四个数,加一个截止时间
🪲

Fireflies 萤火虫

Points that drift slowly and pulse their brightness with an independent sine phase. 缓慢漂移的点,亮度按各自独立的相位做正弦脉动。

Canvas 2Dsin pulseShadow glow
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

Each firefly carries ph, its own phase in the sine wave, and opacity is 0.4 + abs(sin(ph))*0.6. Because ph advances at the same rate for all but starts random, the field twinkles asynchronously — the whole point of the effect. shadowBlur adds the halo without any extra particles. 每只萤火虫带一个自己的相位 ph,透明度是 0.4 + abs(sin(ph))*0.6。ph 的推进速度一致,但起点随机,所以整片是不同步地闪——这正是这个效果的意义。shadowBlur 负责光晕,不需要额外粒子。

What to change可以改的地方

  • 1Give each firefly a slightly different ph increment so they never fall into rhythm.
  • 2Slow the drift to a quarter speed and the scene becomes genuinely nocturnal.
  • 1给每只不同的 ph 增量,它们就永远不会同步成一片。
  • 2漂移速度降到四分之一,夜晚的氛围才真的出来。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

fireflies.html