这是一款流体光球特效,基于 WebGL2 着色器实现。屏幕中央是一颗不断变形蠕动的发光球体,表面像流动的液体一样翻涌,边缘带着丝状的光晕,整体是那种半透明果冻质感。
左侧一排小方块是预设主题——极光、余烬、剧毒、寒冰、等离子、幽灵、日光,点一下就切换配色和形态,注意这些缩略图不是静态图片,而是同一块画布上实时渲染的小球,跟主球一起在动。右上角还有完整的参数面板,球体半径、变形幅度、翻涌速度、高光强度、发光颜色都能自己调。
技术上有个细节挺聪明:整个页面只用了一个 canvas,主球和七个缩略图都画在上面,靠分区渲染实现,性能开销比开八个画布小得多。另外浅色主题下界面文字会自动切成深色,不至于看不清。
要注意它需要 WebGL2 支持,老浏览器打不开会直接提示,上线前记得准备兜底方案。
适合网站加载动画、AI 产品的语音或思考状态提示、科技感落地页主视觉、音乐可视化背景。