✨Effect Lab
Read the full guide完整技术长文 The one canvas setting that makes everything glow一个 canvas 设置,让所有东西都发光
🌌

Flowing Aurora 极光流动

Three heavily blurred circles drifting upward — the aurora form comes from the blur, not from the shapes. 三个重度模糊的圆往上飘——极光的形状是 blur 给的,不是图形本身。

DOMblur filterSine drift
Live demo实时演示

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

How it works原理拆解

Each blob is a 300px circle with filter: blur(60px) and 0.6 opacity, so the edges vanish entirely. Position is driven by x += sin(y/30) and y += 0.5, which produces a lazy diagonal wander; when y passes 300 it snaps back to 0, and the blur hides the jump completely. 每个光团是 300px 的圆,filter: blur(60px) 加 0.6 透明度,边缘因此彻底消失。位置靠 x += sin(y/30)、y += 0.5 驱动,走出懒散的斜向漂移;y 过 300 就跳回 0,而模糊把这一下瞬移完全藏住了。

What to change可以改的地方

  • 1Raise the blur to 90px for an even softer, more atmospheric wash.
  • 2Change the three blob colours to analogues (all blues) for a colder polar sky.
  • 1blur 提到 90px,会更虚、更有大气感。
  • 2三个颜色改成同类色(都用蓝),就是极地的冷调天空。

Source code源码

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

aurora.html