webgl-landing-steering

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）上线前的质量闸门

在增加更多视觉复杂度前通过这些闸门：

1. 信息闸：

• 主视觉标题 + CTA 在 3 秒内可读。
• WebGL 绝不阻碍对卖点的理解。

2. 性能闸：

• 限制像素比：Math.min(devicePixelRatio, 1.5-2)。
• 在常见移动设备上追求稳定帧时间。
• 懒加载重资产；立即展示非 WebGL 的海报/降级图。

3. 无障碍闸：

• 尊重 prefers-reduced-motion（静止帧或低动效模式）。
• 在动画背景之上保持色彩对比度。

4. 可靠性闸：

• 处理上下文丢失与 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 场景。

应用本技能时的输出格式

返回：

1. 推荐车道及原因
2. 视觉规格（配色、动效行为、构图）
3. 技术栈与复杂度档位
4. 降级行为
5. 性能 + 无障碍清单
6. 构建顺序（先 MVP，后增强）