| name | webgl-landing-steering |
| description | 当创建或打磨重度使用 WebGL 的落地页、且需要在保证转化清晰度、性能与实现复杂度之间取得平衡的同时,把视觉引导向某个特定结果(高端、技术、俏皮、电影感)时使用。 |
WebGL 落地页引导技能
用这个技能来引导结果
在写代码前,把落地页目标映射到 WebGL 方向。
1)定义页面意图
识别主要转化点与品牌信号:
- 高端 / 奢华 / 极简自信
- 技术 / 基础设施 / 数据权威
- 俏皮 / 消费级 / 社交能量
- 电影感 / 发布 / 叙事冲击
同时记录:
- 设备构成(偏桌面 vs 偏移动)
- 动效容忍度(
prefers-reduced-motion 策略)
- 生产约束(截止日期、团队技能、维护预算)
2)选择 WebGL 车道
选一条主导车道;避免在主视觉里混用 3-4 种重特效。
车道 A:微妙景深场(转化最安全)
用于:SaaS、生产力、B2B 工具,可读性优先。
- 视觉:柔和渐变网格、缓慢视差平面、轻 bloom
- 动效:低幅度,始终从属于文案
- 技术栈:Three.js 平面着色器或轻量着色器 canvas
- 准则:主视觉文本对比度与 CTA 突出度优先
车道 B:数据/粒子智能(技术可信度)
用于:AI、基础设施、分析、开发者产品。
- 视觉:粒子流、节点网络、矢量场、线框
- 动效:有目的地朝 CTA 区域定向流动
- 技术栈:Three.js + 自定义着色器/points,密集场可选 GPGPU
- 准则:传达“系统行为”,而非随机闪烁
车道 C:以对象为中心的 3D 产品时刻(特性清晰度)
用于:硬件、产品视觉强的应用、发布。
- 视觉:中央 GLTF 模型、受控相机环绕、材质高光
- 动效:交互驱动或基于时间轴的显现
- 技术栈:Three.js + GLTF/DRACO/KTX2 流水线
- 准则:一个主视觉对象、短循环、快速的首次有意义绘制降级方案
车道 D:沉浸式电影场景(品牌 campaign)
用于:以“惊艳感”为主要 KPI 的 campaign 页。
- 视觉:体积光、重后处理、密集场景构图
- 动效:随滚动分章的编排序列
- 技术栈:Three.js + 后处理 + 可选 GSAP ScrollTrigger
- 准则:提供静态/移动降级方案与严格的性能闸门
3)按落地页类型的引导矩阵
- 等候名单 / 预发布:车道 A 或 B。保持文案清晰、加载快。
- 产品特性页:车道 A 或 C。展示产品真相,而非抽象噪点。
- 定价 / 高意向页:主要用车道 A。让 WebGL 仅作装饰。
- 企业信任页:车道 B,配克制配色与低噪点。
- 消费级应用增长页:车道 B 配俏皮配色,但要限制 CPU/GPU 负载。
- Campaign 微站:车道 C 或 D,为低端设备提供明确降级方案。
4)上线前的质量闸门
在增加更多视觉复杂度前通过这些闸门:
- 信息闸:
- 主视觉标题 + CTA 在 3 秒内可读。
- WebGL 绝不阻碍对卖点的理解。
- 性能闸:
- 限制像素比:
Math.min(devicePixelRatio, 1.5-2)。
- 在常见移动设备上追求稳定帧时间。
- 懒加载重资产;立即展示非 WebGL 的海报/降级图。
- 无障碍闸:
- 尊重
prefers-reduced-motion(静止帧或低动效模式)。
- 在动画背景之上保持色彩对比度。
- 可靠性闸:
- 处理上下文丢失与 resize。
- 在 SPA 路由切换时 dispose 几何/材质/纹理。
5)按风险划分的实现策略
- 低风险(最快):CSS + canvas 错觉、极少着色器
- 中风险:含 1-2 个网格的 Three.js 场景、轻量后期特效
- 高风险:多趟着色器、密集粒子、进阶后处理
除非用户明确要求 campaign 级沉浸,转化页默认走低/中风险。
6)用于 Codex 式执行的提示词模板
被要求构建 WebGL 落地页主视觉时,使用这个提示词模式:
“Build a [lane] WebGL hero for a [page type] with [brand adjectives].
Primary goal: [conversion].
Constraints: [device mix], [performance budget], [reduced motion policy].
Implement fallback first, then enhance with WebGL.
Keep hero copy clarity as priority over visual complexity.”
7)常见失败模式与纠正
- 失败:“看着酷但转化降了。”
- 修正:降低动效幅度、把背景调暗/调柔、提高 CTA 对比度。
- 失败:“移动端卡顿。”
- 修正:减少粒子数量、降低 DPR 上限、移除昂贵的后处理。
- 失败:“视觉风格显得通用。”
- 修正:选一个与品牌契合的标志性母题(网格、波、环绕、碎片)。
- 失败:“团队无法维护着色器复杂度。”
- 修正:简化为带文档参数的模块化 Three.js 场景。
应用本技能时的输出格式
返回:
- 推荐车道及原因
- 视觉规格(配色、动效行为、构图)
- 技术栈与复杂度档位
- 降级行为
- 性能 + 无障碍清单
- 构建顺序(先 MVP,后增强)