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

Gravity Field 引力场

Sixty particles that accelerate toward the cursor, with force falling off as 1/distance. 六十个粒子朝鼠标加速,引力按 1/距离 衰减。

Canvas 2DInverse forceVelocity damping
Live demo实时演示

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

How it works原理拆解

The pull is dx * min(0.5, 6/d) * 0.02 — the 6/d term is what makes it behave like gravity rather than a spring: nearby particles get yanked hard, distant ones barely move. Velocity is multiplied by 0.98 every frame, so particles settle into a slow orbit instead of collapsing into a single point. 吸力是 dx * min(0.5, 6/d) * 0.02。6/d 这一项是它像引力而不像弹簧的关键:近处被猛拽,远处的几乎不动。速度每帧乘 0.98,所以粒子最终会进入缓慢绕行,而不是全塌进一个点。

What to change可以改的地方

  • 1Drop the damping to 0.9 for a snappier, more electric feel.
  • 2Invert the sign to get a repulsion field — a bubble of empty space around the cursor.
  • 1阻尼降到 0.9,会更干脆、更有电流感。
  • 2把符号反过来就是斥力场——鼠标周围凭空出现一个空洞。

Source code源码

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

gravity.html