前端代码：液态渐变背景（Three.js 互动版）

先声夺人的三维流动背景，触控/鼠标拖拽即可扭动色块，配合多套渐变方案与可视化调色面板，专为科技感落地页、品牌首屏或活动开场动画而生。

亮点特点

• 三维噪声液化：Three.js 自定义着色器驱动，色块随时间与交互柔滑流动。
• 触控纹理驱动：鼠标/手指移动会留下“涟漪”轨迹，真实扰动渐变层。
• 五套方案+高级调色：预置 5 组配色，一键切换，或打开调色面板逐一微调、复制与导出。
• 品牌露出：顶部 KS 主题徽标与中文文案，开箱即用的 Demo 级演示。
• 轻量易嵌入：纯前端，无构建依赖，直接打开 index.html 即可演示。

设计风格

• 玻璃拟态控件 + 粒子噪声背景，整体偏未来科技感。
• 文案与标题居中悬浮，白色高对比度，适合深浅渐变的多场景叠加。
• 调色面板使用半透明黑玻璃底 + 轻投影，方便在炫彩背景上保持可读性。

适用场景

• 科技/创意公司首屏、活动 H5、品牌 Landing Page 背景。
• 数字藏品、3D 可视化、科技年会或新品发布的舞台/展板视觉。
• 需要可交互、可调色、快速换肤的演示 Demo 或设计稿占位。

使用方式

1. 下载后直接双击 index.html 预览，或用本地服务器打开以避免跨域限制。
2. 顶部按钮切换 5 套渐变方案，点击“高级调色”可打开调色面板。
3. 在面板中修改 6 个色值，实时预览，并可复制或导出全部色值。
4. 通过鼠标移动/拖拽舞台，观察液态渐变随触点扭动的效果。

文件结构

• index.html：页面骨架与中文文案。
• style.css：玻璃拟态 UI、品牌徽标、按钮与面板样式。
• script.js：Three.js 场景创建、液态噪声着色器、触控纹理驱动和配色方案切换。

自定义提示

• 想增加/替换配色：在 script.js 的 colorSchemes 中新增向量色值，并更新按钮文案。
• 需要更柔和/更炫的流动速度与颗粒：调节 uSpeed、uIntensity、uGrainIntensity 等 uniform。
• 如需嵌入现有站点，保留 #webGLApp 全屏覆盖，调整 .heading / .sub 的定位即可。