web-fx · bg-fx

十款 WebGL2 动态背景 共享一份引擎,每个效果只写自己的机制:极光 · 墨流 · 焦散 · 摩尔干涉 · 金属拉丝 ……

scene (HDR) → bright (阈值 1.0) → blur ×4 可分离 → composite (bloom + 径向色差 + 亮度门控颗粒 + smoothstep 暗角 + ACES + 三角抖动)

Lumen River流光之河

域扭曲的发光墨流,光标只搅动不重排构图;发光质量锁在右侧 2/3,标题区留暗。

dark ice-blue speed · bloom · exposure · grain · ca · vig
打开 effect 页 →

Solar Drift暖阳漂移

纸底上缓慢绕行的太阳:过曝核心 + 平方反比日冕 + 定向体积光轴 + 层状云带。

light amber speed · bloom · exposure · grain · ca · vig
打开 effect 页 →

Aurora Veil极光幕帘

五条独立顶高的幕帘,striae 频率与振幅随空间变(读作垂挂织物,不是条形码)。

dark lime speed · bloom · exposure · grain · ca · vig
打开 effect 页 →

Gilded Topography鎏金地形

等高线金属地图:线宽随坡度变,指数等高线 + 金属双色,只覆盖约四成画面。

dark gold speed · bloom · exposure · grain · ca · vig
打开 effect 页 →

Silk Interference丝缎干涉

两块光栅平面的真实摩尔拍频 + 脊线镜面高光:是“丝”,不是“布”。

dark violet-rose speed · bloom · exposure · grain · ca · vig
打开 effect 页 →

Tidal Caustics潮汐焦散

五次迭代的折射焦散:细亮脉络聚成簇,其余压成暗静水;亮点是唯一发射体。

light aqua speed · bloom · exposure · grain · ca · vig
打开 effect 页 →

Ember Field余烬之野

三层深度带的泪滴余烬上升,远糊近锐;视差来自构造而非缩放。

dark ember-orange speed · bloom · exposure · grain · ca · vig
打开 effect 页 →

Chrome Ripple铬面涟漪

拉丝金属:波前被表面曲率扭曲(非同心靶环)+ 各向异性镜面条纹 + 大尺度 sheen。

dark cold-white speed · bloom · exposure · grain · ca · vig
打开 effect 页 →

Prism Beam棱镜光束

按角度索引波长的棱镜扇:紫→红色散,核心留白,尘点只存在于束内。

dark spectral speed · bloom · exposure · grain · ca · vig
打开 effect 页 →

Magnetic Filings铁屑磁力线

双极偶极场:|B| 决定每根铁屑的长短与亮度,零点只剩短桩,鞍线可见。

dark signal-red speed · bloom · exposure · grain · ca · vig
打开 effect 页 →