这是一款用原生 WebGL2 + GLSL 手写的 Hero 背景：整屏是深蓝紫色底加一层不断流动、翻转、交错的彩色六边形网格，鼠标位置附近的画面会向外微微扭曲，像一层液态玻璃。前景是一段大标题 HEADING，标题用 conic-gradient 渐变虹光配 `blur(15px)` 光晕，加一枚磨砂玻璃质感的按钮。整段没有引入任何 3D 库，也没有 canvas 2D——所有色彩、形状、噪声都在一个 fragment shader 里计算，性能对显卡友好，容易改成任何品牌色。
这款流体六边形 Hero 的四个亮点
核心技术是 Domain Warping：先给 UV 坐标叠加低频 simplex 噪声位移，再第二次叠加更高频噪声，得到「像水一样流动」的坐标空间，`hexDist` 再把这个空间打成六边形——静态六边形因此变成了流动的六边形。
六边距离场 `hexDist` 用 `mat2(1.0, 0.5, 0.0, 0.8660254)` 转换到六边坐标，再取距最近格点的距离，一句 `smoothstep` 就能得到平滑的六边形边界与发光。
鼠标扭曲效果不新增元素：直接在 shader 里根据 `length(st - mouse_uv)` 做 `smoothstep(0.35, 0.0, dist)` 得到影响半径，把 UV 沿 mouse 方向外推 0.15 强度，实现「水面被手指戳一下」的扭曲。
标题的虹光用 CSS `conic-gradient` + `background-clip: text` + `filter: blur(15px)` 组合，另一份不模糊的副本叠在上面做实体轮廓；`@property --angle` 让 conic 起始角随时间自转。
Shader 与 CSS 组合的三个取舍
其一，全屏 shader 每帧要覆盖每个像素，Domain Warping 涉及多次 noise 采样，中低端设备可能压力大——本模板已通过 `precision highp float` 与 `min(u_res.x, u_res.y)` 归一化坐标降低了负担，仍建议在生产环境结合 `IntersectionObserver` 在离屏时暂停 requestAnimationFrame。其二，标题虹光用两层 conic + 一层 blur、一层实体，逻辑不复杂但性能敏感——手机端可以把 blur 半径从 15px 降到 8px。其三，Hero 前景内容都设 `pointer-events: none` 只有按钮开启点击，保证背景 shader 能捕捉全屏鼠标位置。
改成自己的品牌色和文字
要换 Hero 文字，改 `
HEADING
` 以及 CSS 里 `h1::before` `h1::after` 的 `content: "HEADING"` 三处保持一致。要换背景主色，找到 shader 里 `bgColor = vec3(0.01, 0.0, 0.03) + hsv2rgb(vec3(0.65 + bg_noise * 0.1, 0.8, 0.1))`，第一个是深色底、后面的 0.65 是色相偏移；改这个色相就整体换色。要让六边形更大或更密，改 `uv *= 2.5` 里的 2.5（越大越密）。虹光颜色在 CSS 的 `conic-gradient(...)` 里，改 6 个色标即可。
浏览器需支持 WebGL2、CSS `@property` 与 `backdrop-filter`：Chrome 90+、Safari 16.4+、Edge 90+、Firefox 88+。移动端 backdrop-filter 若卡可以降半径或去掉。详细运行方法请参见压缩包内的帮助文档。
常见问题
手机上 GPU 占用高怎么办
把 canvas 分辨率从 devicePixelRatio 全量降到 1、shader 里的 `st *= 0.7` 系数减小让画面简化，或者用 CSS 缩放 canvas 到 50% 再 stretch 显示，视觉几乎不损失。
Firefox 上背景看起来偏色
Firefox 与 Chrome 的 WebGL2 精度处理略有差异；`precision highp float` 已经拉高了精度，如仍偏色可在 `hsv2rgb` 后加 `pow(color, vec3(2.2))` 做手动 gamma。
可以拿背景 shader 单独用而不要标题吗
可以。删掉 `.hero-section` 里的 `.glass-container`，只保留 canvas 即可作为任意页面的动态背景。
能否加载入更换鼠标扭曲强度
能。shader 里 `distortion_strength = smoothstep(0.35, 0.0, mouse_dist) * 0.15`，0.15 是强度，0.35 是影响半径，改这两个数即可。
适合放在哪些页面
适合科技/AI 公司官网首屏、加密货币/Web3 Landing Page、游戏发布页 Hero、活动主视觉、产品预售页面、任何需要「科幻氛围 + 有生命的背景」的场景。下载源码后可整屏嵌入或作为独立背景层使用。
