✨Effect Lab
Read the full guide完整技术长文 One force, six pictures一个力,六张画面
🕳️

Black Hole 黑洞漩涡

Two hundred particles whose radius shrinks by 1% per frame while their angle keeps advancing. 两百个粒子,半径每帧缩 1%,角度持续前进。

Canvas 2DPolar spiralRespawn
Live demo实时演示

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

How it works原理拆解

r *= 0.99 is a geometric decay, so a particle covers the same *proportion* of remaining distance each frame — that is what makes the infall accelerate visually without an explicit force. Brightness is tied to radius (Math.min(80, p.r)), so particles glow brighter as they get closer, then respawn at r=250. r *= 0.99 是几何衰减,意味着每帧吞掉的是「剩余距离的固定比例」——不用写任何力,下落感自己就加速了。亮度绑定在半径上(Math.min(80, p.r)),越靠近中心越亮,缩到 4 就在 r=250 处重生。

What to change可以改的地方

  • 1Use r *= 0.97 for an aggressive, violent collapse.
  • 2Randomise the decay per particle so the stream looks ragged instead of uniform.
  • 1改成 r *= 0.97,会变成暴烈的塌缩。
  • 2每个粒子的衰减率做成随机,粒子流就不均匀,看起来更毛躁。

Source code源码

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

blackhole.html