你打开一个品牌的官网，没有满屏的 banner 轮播，也没有一屏一屏往下堆的图文。你向下滚动鼠标，画面里的镜头开始往前飞------先掠过一栋小楼的外立面，然后穿墙进入室内，扫过办公区，再从另一扇窗穿出去，平滑地落到下一个场景。整个过程没有黑屏、没有 loading、没有剪辑点，像一镜到底的电影镜头，而控制这个镜头的，就是你手里的滚轮。
这种页面你大概率见过。苹果的产品页、Nike 的新品页、一些高端物流和汽车品牌的官网，都在用这套东西。业内管它叫scroll-scrubbed fly-through （滚动驱动的飞行叙事）。过去它有个很现实的门槛：贵，而且慢。
直到 2026 年 7 月，一个叫scroll-world的开源项目在 GitHub上线，把这件事从"动效工作室的定制项目"变成了"AI 编程助手的一个任务"。项目上线五周左右 star 数冲到 8000 以上，今天我们就把它拆开讲清楚。
一、先给结论： scroll-world 是什么，不是什么
网上介绍它的文章不少，但很多一上来就把它说成"AI 建站工具"，这个说法不准确。为了避免你带着错误预期上手，先把关键事实摆出来。
| 项目 | 事实 |
|---|---|
| 项目名称 | scroll-world |
| 作者 | oso95 |
| 项目形态 | 一个 Agent Skill（SKILL.md 兼容的技能包），不是 SaaS、不是在线建站平台 |
| 适配对象 | Claude Code、Codex、Cursor 等 20 多个支持 SKILL.md 的 AI 编程助手 |
| 开源协议 | MIT，技能本身免费 |
| 主要语言 | JavaScript（滚动引擎为原生 JS） |
| 核心产出 | 滚动驱动、镜头无缝飞行的 3D 落地页 |
| 资产来源 | GPT Image 2 生成等距场景图，Seedance/Kling 生成运镜视频 |
| 单项目生成成本 | 6 个场景的 1080p 视频链约 27 美元（官方 README 口径，仅 AI 生成费用） |
| 典型参考 | 苹果产品页、Emons 物流官网的飞行叙事效果 |
这里有三个认知要先纠正。
第一，它不是 " 输入一句话就吐出一个网站 " 的黑盒。 scroll-world 本质上是"流程规范 + 提示词模板 + 一个可移植的滚动引擎"的组合包。它会引导你做品牌访谈、确定场景顺序、确认预算，然后调用外部 AI 服务生成素材，最后把素材接进引擎。关键决策------做几个场景、品牌怎么呈现、花多少钱------仍然是你来定。
第二，它不是 Three.js **那种实时渲染方案。**很多人以为这种 3D 页面是网页里实时跑 3D 场景，其实不是。scroll-world 的画面是 AI 预先生成好的视频，滚动操作的是视频的播放进度（时间线），而不是实时驱动一个 3D 相机。这点很关键，后面讲原理会细说。
**第三，免费的只是技能，素材生成要花钱。**它强依赖外部付费服务（视频按片段计费、图像按积分计费），而且改一次场景往往意味着重新生成视频。指望它零成本、纯本地跑通，不现实。
二、为什么这个东西能火：先看传统方案有多痛
要理解scroll-world 的价值，得先知道在它出现之前，做一个这样的页面意味着什么。
**路子一：找动效工作室定制。**这是效果上限最高的方式，但也是最贵的。第三方市场资料显示，这类页面的工作室报价通常在 1 万到 5 万美元区间，周期以月计。你买的是一整套创意策划、3D 建模、动画调校和前端联调。大品牌能承担，中小公司基本直接劝退。
路子二：自己用 Three.js **手写。**听起来省钱，实际坑在人力成本。你要自己搭 3D 场景、写相机路径、绑滚动监听，还要处理各种设备上的流畅度。真正难的从来不是"能不能做出来"，而是"做得够不够顺滑"。人眼对掉帧极其敏感，相机路径上任何一个卡顿、任何一次接缝跳变，都会让页面瞬间显得廉价。一个工程师耗上两三个月把它磨平，是常有的事。
| 交付方式 | 成本量级 | 周期 | 主要问题 |
|---|---|---|---|
| 动效工作室定制 | 1 万--5 万美元（第三方口径） | 数周到数月 | 贵，中小团队难以承担 |
| 自己写 Three.js | 人力成本为主 | 2--3 个月打磨 | 相机与接缝调顺极费工 |
| scroll-world + AI 生成 | 约 27 美元生成费（6 场景） | 数小时生成 + 少量接入 | 依赖付费 API，改稿要重新生成 |
scroll-world 没有发明新的视觉语言，它做的事情是把原本高度依赖人工经验的整条流水线，封装成 AI 助手可以照着执行的规范。它瞄准的不是"能不能做"，而是"值不值得做"这个决策门槛。
三、技术原理：镜头到底是怎么 " 飞 " 起来的
这部分是全文的硬核内容，我按素材从生成到上屏的顺序讲。建议做技术选型的同学重点看这一节。
3.1 画面基底： AI 生成的等距微缩场景
scroll-world 里每一个场景，都是一张AI 生成的等距视角微缩场景图（ isometric diorama ）。所谓等距视角，就是没有透视消失点、所有平行线保持平行的轴测画法，视觉上像一个精致的微缩模型沙盘。
图2 等距微缩智慧工厂场景
场景静态图默认用GPT Image 2生成，通过Higgsfield 调用；如果本地装了 Codex CLI，也可以走它内置的 image_gen，账单计入 ChatGPT 订阅而不是单独花积分。一个场景对应一张静态图，这张图既是场景的视觉基底，也是后续生成运镜视频的起始帧。
为什么选等距微缩风格而不是写实风格？我的理解是两个原因：一是这种风格本身品牌感强、辨识度高，二是 AI 生成的等距场景在不同场景之间更容易保持视觉统一，写实风格一旦出现细节漂移会非常扎眼。
3.2 镜头是真的在动：图生视频，而不是图片平移
有了静态场景，接下来要让镜头"飞"进去。这里有个常见的误解要澄清。
有些廉价的滚动页面，做法是让一张静态图随滚动平移、缩放，制造"在动"的假象。仔细看会发现镜头根本没有真正的空间运动，只是图片在挪位置。scroll-world 不是这么干的。
它用的是图生视频（ image-to-video ） ：以场景静态图为起始帧，调用视频模型生成一段真正的相机运动画面。官方默认后端是Monid 上的 Seedance 2.0 ，按片段用美元计费；Higgsfield 上的 Seedance 或 Kling 作为后备。而且它只选用支持首末帧条件化的模型------也就是能锁定镜头起止画面的型号，这是后面接缝能对齐的前提。
图3 镜头在两个场景之间无缝穿越
这里要建立一个核心认知：**滚动本身不产生任何画面，它只驱动时间线。**真正的相机运动是视频模型预先生成好的，滚动条相当于视频的进度条，你滚到哪里，画面就定位到对应那一帧。苹果产品页用的也是同一类技术思路。
3.3 灵魂细节：接缝规则（ Seam Rule ）
如果说整个项目有什么地方最值得讲，那就是它处理接缝的方式。这也是绝大多数 AI 视频拼接翻车的地方。
先看普通拼接为什么会闪。两段相邻的视频，如果第一段的末帧和第二段的首帧不是同一帧画面，那么播放到接缝处，画面就会突然跳一下。滚动驱动的页面这个问题会被放大------因为用户是手动控制进度的，接缝处可能反复来回拖，跳变根本藏不住。
图4 接缝规则示意图
scroll-world 的解法被写进SKILL.md 当成一条硬规则，大意是：连接两个场景的连接器片段（ connector **），必须直接从这两个相邻场景的实际渲染帧生成。**具体来说：
·连接器片段的第一帧，等于场景A 的实际末帧；
·连接器片段的最后一帧，等于场景B 的实际首帧；
·因为视频模型支持首末帧条件化，这两个对齐点可以做到像素级一致。
于是整条链变成：场景 A 末帧 → 连接器（帧级衔接）→ 场景 B 首帧，每个接缝都没有跳变。这不是靠后期模糊遮一下，而是从生成阶段就把"帧必须对得上"当成约束条件。
说白了，同行都在拼素材，scroll-world把最容易被忽略、但破坏力最大的那个细节，直接固化成了流程里不可跳过的一步。这是它和普通"AI 视频拼接脚本"拉开差距的地方。
3.4 滚动引擎：原生 JS ，框架无关
素材生成完，需要一个东西把它们在网页上组织起来，这就是scrub-engine.js。它是整个项目里唯一的核心代码，纯原生 JavaScript 写的，不依赖特定框架。
它干三件事，每件都对应一个实际问题：
·blob-seek （二进制定位）：把滚动位置直接映射到视频的某一帧。用户滚到哪个百分比，引擎就把视频定位到对应时间点的帧，这是"滚动控制镜头"的底层实现。
·懒加载（ lazy load ）：视频片段按需加载，而不是一进页面就把整条视频链全拉下来，否则首屏会非常重。
·接缝交叉淡入（ seam crossfade ）：片段切换的位置做一个极短的交叉淡化，进一步掩盖边界，保证视觉连续。
图5 技术架构分层图
引擎是配置驱动的，你不需要理解视频生成那套东西，只要按格式给它一个场景清单就能挂载。官方 README 里给了配置结构（代码为节选）：
// scrub-engine.js 配置结构（节选）
const world = new ScrollWorld({
scenes: [
{
still: "scene1.webp",
dive: "scene1-dive.mp4",
poster: "scene1-poster.webp",
},
{
still: "scene2.webp",
dive: "scene2-dive.mp4",
poster: "scene2-poster.webp",
},
],
connectors: "conn-1-2.mp4",
mobilePortrait: true, //手机端自动切换竖屏链
});
world.mount(document.getElementById("stage"));
每个场景对象里，still是静态图、dive是潜入运镜视频、poster是视频加载前的封面占位；connectors是场景之间的连接器片段；mobilePortrait控制移动端竖屏开关。改场景本质上就是改这个配置清单。
3.5 移动端：不是裁剪，是独立渲染的竖屏链
移动端是这类页面最容易做砸的地方。偷懒的做法是把横屏视频直接塞进竖屏，上下留黑边或者强行裁切，构图全毁。
scroll-world 的处理方式是：移动端单独生成一条平行的 9:16 竖屏视频链，按手机屏幕重新构图，并且帧锁定自己的竖屏渲染帧，而不是横屏版的裁剪。引擎检测到手机设备，会自动切换到竖屏片段和对应封面，不需要单独维护一个移动站点。
图6 移动端与桌面端对比
代价也要说清楚：多一条竖屏链，意味着视频生成数量大约翻倍，成本同步增加。这笔钱在最开始的访谈阶段就会列在预算里，不会等生成完才告诉你。
四、完整工作流：从访谈到上线，就三步
原理讲完，我们把视角拉到执行层。当你在 AI 助手里调用 scroll-world 时，它实际跑的是下面这条流水线。
图7 scroll-world 工作流
第一步，品牌访谈。 助手会依次问你：行业和品牌定位、品牌故事与核心卖点；品牌套件可以从网址导入、手动提供，或者让它先给方案；然后确定艺术方向和镜头到访的场景顺序；再问你要不要移动端竖屏版本；最后给出渲染档位和积分成本估算。注意，你确认预算之前，不会生成任何东西。
**第二步，资产生成。**每个场景生成一张等距静态图、一段潜入式运镜视频；场景之间生成连接器片段，且连接器取自相邻场景的实际渲染帧；如果开了移动端，再平行生成一条竖屏链。生成是后台批量跑的，助手会轮询进度，单个视频片段通常要几分钟。
**第三步，引擎组装。**把场景清单填进配置，挂载滚动引擎，引擎负责帧定位、懒加载和接缝淡入，手机端自动切竖屏。最终产出一个可以直接嵌入任意技术栈的页面。
五、实操
5.1 三种安装方式
方式一：在 Claude Code 里作为插件安装（官方推荐）
/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-world
装完之后，直接让它"做一个滚动穿行的世界落地页"，或者用/scroll-world命令调用。
方式二：通过 Vercel 的 skills CLI 安装（Codex 、Cursor 等）
npx skills add oso95/scroll-world # 弹出选择时勾选你的 AI 助手
npx skills add oso95/scroll-world -a codex # 或者直接指定 Codex
在 Codex 里用$scroll-world调用，或者通过/skills浏览。
方式三：手动拷贝（drop-in ）
git clone https://github.com/oso95/scroll-world
cp -R scroll-world/skills/scroll-world ~/.claude/skills/ # Claude Code
cp -R scroll-world/skills/scroll-world ~/.codex/skills/ # Codex
5.2 环境依赖
动手之前先确认下面这些依赖，缺一个流程都可能断。
| 依赖 | 用途 | 成本 | 是否必需 |
|---|---|---|---|
| Monid CLI（API key + 余额） | 默认视频后端，Seedance 2.0，按片段计费 | 约 4--8 美元/片段（第三方口径） | 必需（默认） |
| Higgsfield CLI（已认证 + 积分） | 场景静态图、Kling 后备、Monid 缺失时整条链 | 按积分计费 | 必需 |
| ffmpeg / ffprobe | 抽帧、拼接、视频编码 | 免费 | 必需 |
| Python 3 + Pillow | 竖屏画布、可选背景抠图 | 免费 | 必需 |
| Codex CLI | 用 image_gen 生成静态图，走 ChatGPT 订阅 | 计入订阅 | 可选 |
有个细节值得一提：官方在2026 年 7 月 25 日验证过 Monid 的首末帧条件化能力，确认它能帧锁定整条无缝链，文件通过 Monid 免费的工作区文件系统传输，按用量计费、没有订阅、也没有月度过期。技能每次构建都会重新检查接口的数据结构，以防模型目录变化导致流程失效------这是工程上比较稳妥的做法。
六、成本账： 27 美元是怎么算出来的
很多人对"27 美元一条链"这个数字没概念，我把公式拆开。
假设你有 N 个场景：
·图像生成：约N 次（每个场景一张静态图，走 Higgsfield 积分）；
·视频生成：约2N−1 段（N 段场景潜入视频 + N−1 段连接器，走 Monid 按片段计费）。
以 6 个场景为例，就是 6 张静态图 + 11 段视频（6 段潜入 + 5 段连接器），官方给出的 1080p 整条链价格约 27 美元。
图8 成本对比图
| 项目 | 数量（ 6 场景） | 计费方式 |
|---|---|---|
| 场景静态图 | 6 张 | Higgsfield 积分 |
| 场景潜入视频 | 6 段 | Monid 按片段 |
| 连接器片段 | 5 段 | Monid 按片段 |
| 合计 | 6 图 + 11 视频 | 约 27 美元 |
| 加移动端竖屏链 | 视频数量约翻倍 | 成本约翻倍 |
必须强调口径：这 27 美元只是 AI **资产生成的费用，不含人工策划、品牌设计和后期服务。**如果你是对外交付的服务商，对客户报的是解决方案的价格，不是 API 的价格。第三方资料里工作室 1 万--5 万美元、自由职业者 1500 美元起的报价，和这 27 美元不是一回事，别混为一谈。
七、技能包里都有什么
scroll-world 的仓库刻意保持得很精简，没有冗余东西。结构如下：
skills/scroll-world/
├── SKILL.md完整流程 + 接缝规则 + 坑点清单
└── references/
├── prompts.md 需求清单 + 全套 Higgsfield 提示词模板
├── pipeline.md 可复制的批处理脚本（生成→抽帧→连接器→编码）
├── scrub-engine.js 可移植的配置驱动滚动引擎
├── index-template.html 最小独立页面，已挂载引擎
└── knockout.py 浮动场景的背景抠图
| 文件 | 作用 | 什么时候看 |
|---|---|---|
| SKILL.md | 主流程、接缝硬规则、常见坑 | 第一次用必读 |
| prompts.md | 访谈清单和提示词模板 | 想自定义生成效果时 |
| pipeline.md | 批处理脚本 | 想手动跑生成流程时 |
| scrub-engine.js | 滚动引擎源码 | 想改交互逻辑时 |
| index-template.html | 最小可运行页面 | 最快验证效果时 |
| knockout.py | 背景抠图 | 做悬浮场景时 |
实际项目里生成的.mp4、.webp素材是按项目单独产出的，不包含在技能仓库里。
八、什么情况该用，什么情况别碰
这是我建议你做决策时直接对照的部分。
适合用的情况：
·要做一个让人记住的品牌发布页、产品首屏或行业展示页；
·愿意为视觉冲击力付费，也能接受数小时的生成等待；
·手里有 Higgsfield 积分，或者愿意让静态图走 Codex 订阅；
·做对外交付的团队，想用极低的边际成本承接高端页面需求。
不建议用的情况：
·预算紧张、想要完全免费或纯本地方案------它对付费 API 依赖很深；
·页面内容或场景需要频繁修改------每改一次基本都要重新生成视频，迭代成本不低；
·想要零干预、"给段文案就自动出网站"------它是"专家能力封装"，关键判断还得你来；
·页面以信息密度和 SEO 文字内容为主------重型视频首屏对传统搜索收录并不友好，需要专门做文字层和降级。