星火织境

核心功能：基于Three.js、GSAP等技术栈，复刻或创作视觉沉浸式网站，支持3D渲染、滚动驱动动画、平滑滚动等特效，提供一键项目脚手架。典型场景：用户提及复刻网站、氛围编程、3D滚动页面等需求，或提供URL/截图要求还原。输入为需求描述、URL/截图，输出是可部署的前端项目，遵循分析→脚手架→构建→迭代的工作流。

zhaobod1

热度 13.76

最近更新 2026-07-15 14:22:52

分类：开发依赖：代码执行 / 联网浏览搜索 / 读写文件应用场景：代码生成 / 自动化脚本 / UI 原型 / 模板

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add huo15-vibe-web-replica

Metadata

name: huo15-vibe-web-replica
displayName: 星火织境
version: 1.0.0
description: 复刻与创作视觉沉浸式网站：3D 渲染、滚动驱动动画、平滑滚动、沉浸式特效。技术栈 Three.js + WebGL2、GSAP 3.12 + ScrollTrigger、Lenis 平滑滚动、 Draco 压缩 GLB、Web Audio、KTX2 纹理压缩、TagCloud。当用户说"复刻网站" "vibe coding""氛围编程""做个 3D 滚动页面""Three.js""GSAP""ScrollTrigger" "Lenis""WebGL"或提供 URL/截图要求还原网站时使用。脚本 scripts/scaffold.sh 一键创建 Vite + Three.js + GSAP + Lenis 项目。
homepage: https://github.com/zhaobod1/huo15-skills
metadata: {"openclaw":{"emoji":"✦","tags":["vibe-coding","three-js","gsap","webgl","frontend","3d"],"requires":{"bins":["node","npm"]}}}
aliases: ["星火织境","Vibe Web Replica","氛围编程","网站复刻","3D滚动页面","Three.js网页","GSAP动画","vibe coding"]

星火织境 (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 滚动揭示
相机移动创造深度 — 滚动推近、枢轴旋转