星火织境 (Vibe Web Replica)

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

技术栈

层	库	版本
3D 渲染	three	^0.169.0
动画	gsap	3.12.7
滚动驱动	gsap ScrollTrigger	(bundled)
平滑滚动	lenis	^1.1.20
构建工具	vite	^6.0
GLB 压缩	draco3dg loader	(three addon)
音频	Web Audio API	native

工作流

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 为起点。关键模式：

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

Step 4: 滚动动画

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

ScrollTrigger：pin 章节、scrub 动画到滚动进度
Timeline：链式 tween（淡入 → 移动 → 旋转 → 淡出）
SplitText：标题逐字/逐词揭示
Observer：追踪滚动方向，触发方向性效果
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: 迭代

npm run dev 启动开发服务器
浏览器打开，视觉检查
与目标比对（截图或实时 URL）
调整时间、颜色、相机路径
优化：减少 draw call，使用 instancing，懒加载重资产
构建：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 滚动揭示
相机移动创造深度 — 滚动推近、枢轴旋转

星火织境

安装到 Tokeny（自动）

SKILL.md