星火织境

星火织境 (Vibe Web Replica)

火一五星火绽放，织造沉浸式 Web 境界。 复刻或创作视觉震撼的沉浸式网站：3D 渲染 + 滚动驱动动画 + 平滑滚动 + 沉浸式特效。 灵感来自 Codex vibe-coding 方法论 — 分析目标 → 脚手架 → 构建 → 迭代。

技术栈

工作流

Step 1: 分析目标

如果给了 URL，用 web_fetch 抓取页面。识别：

• 布局结构（hero、章节、footer）
• 视觉风格（色彩、字体、间距）
• 交互模式（滚动效果、hover、3D）
• 资源需求（3D 模型、纹理、音频）

将简要规格写入项目根目录 vibe-spec.md。

Step 2: 脚手架

运行脚手架脚本：

bash ~/.catpaw/skills/huo15-vibe-web-replica/scripts/scaffold.sh my-project
cd my-project && npm install

创建 Vite + Three.js + GSAP + Lenis 项目，所有模板预接线。

Step 3: 构建 3D 场景

以 templates/three-scene.js 为起点。关键模式：

1. 场景设置：Scene, PerspectiveCamera (fov 45-70), WebGLRenderer (antialias, alpha)
2. 光照：AmbientLight + DirectionalLight (主光) + 可选轮廓光
3. GLB 加载：GLTFLoader + DRACOLoader (解码路径从 CDN)
4. 相机动画：将相机 Z/Y/旋转绑定到滚动进度
5. 性能：pixelRatio 上限 2，resize 处理，可选后处理

Step 4: 滚动动画

使用 templates/gsap-scroll.js。关键模式：

1. ScrollTrigger：pin 章节、scrub 动画到滚动进度
2. Timeline：链式 tween（淡入 → 移动 → 旋转 → 淡出）
3. SplitText：标题逐字/逐词揭示
4. Observer：追踪滚动方向，触发方向性效果
5. Lenis 联动：Lenis 驱动 RAF，ScrollTrigger 使用 Lenis 滚动位置

Step 5: 平滑滚动设置

使用 templates/lenis-setup.js。将 Lenis 接入 GSAP ScrollTrigger：

lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

Step 6: 特效与打磨

• 粒子系统：BufferGeometry + Points 或 instanced meshes
• 标签云：导入 TagCloud.js 或用 CSS 3D 变换构建
• 音频：Web Audio API — AudioContext, gain node, click-to-unlock 模式
• 后处理：EffectComposer + UnrealBloomPass 发光
• 纹理压缩：KTX2Loader 处理大纹理

Step 7: 迭代

1. npm run dev 启动开发服务器
2. 浏览器打开，视觉检查
3. 与目标比对（截图或实时 URL）
4. 调整时间、颜色、相机路径
5. 优化：减少 draw call，使用 instancing，懒加载重资产
6. 构建：npm run build → dist/ 可部署

代码模板

• Three.js 场景样板：three-scene.js
• GSAP 滚动动画：gsap-scroll.js
• Lenis 平滑滚动：lenis-setup.js
• HTML 入口：index.html
• 主入口：main.js

API 参考

详细 API 模式见 reference.md。

质量清单

• 页面 3 秒内加载（懒加载 3D 资产）
• 中端设备 60fps（限制像素比，降低多边形数）
• 滚动丝滑流畅（Lenis + RAF）
• 动画在正确位置触发
• 移动端响应（触摸事件，降级特效）
• 音频需用户交互触发（autoplay 策略）
• 无控制台错误
• 构建无警告

Vibe Coding 心法

• 先抓"氛围" — 设计的情感内核（动感？静谧？神秘？）
• 选 2-3 个核心特效，不过载
• 用超长章节 (200vh+) 制造戏剧性滚动序列
• Pin 章节聚焦动画时刻
• 配色：深色背景 + 1-2 个强调色
• 排版：大号粗体，SplitText 滚动揭示
• 相机移动创造深度 — 滚动推近、枢轴旋转