scroll-world
滚一下，飞过一个 3D 世界
GitHub 实测 8,849★ · 整仓 49KB · MIT · 安装零 API Key
亲测 Lucy ｜ 配图与视频 eleven ｜ 组装上链 Builder阿码
它是什么
一个符合 SKILL.md 协议的 Agent Skill，Claude Code、Codex 等都能装。它做一件事：把任意品牌变成一页「滚动即飞行」的 3D 世界。你往下滚，镜头钻进场景内部，再滑向下一幕，中间没有剪辑。同一招 Apple 的产品页用了很多年，现在一个 Agent Skill 就能复刻。
产物是静态 HTML/JS 落地页：页面里有一段预渲染的视频链，滚动条的位置决定视频播到哪一秒。镜头是真的在动，滚动只负责拨时间。
工作流分三步
- 访谈你：主题与一句话卖点、品牌色、美术方向、镜头风格、要几个场景、要不要手机版、预算多少，全部确认后才开始生成。
- 生成素材：每个场景一张静帧（gpt_image_2）+ 一段俯冲镜头 + 连接相邻场景的过渡镜头。连接镜头的首尾帧与邻居严格对齐，无缝就靠这一步。
- 接线：一个零依赖的 vanilla JS 引擎（scrub-engine.js）把整条链播成一次连续飞行，桌面和手机各有一套。
引擎是框架无关的，纯 HTML、Next.js、Vue 都能塞进去。整仓 49KB，价值不在框架，在管线、提示词和无缝方法。
亲测记录 Lucy 实测 · 2026-09-01 · M1 Pro
安装，两条路都通了
- 官方 CLI：
npx -y skills add oso95/scroll-world，exit 0，SKILL.md 与 references 完整落盘。 - drop-in：
cp -R skills/scroll-world ~/.claude/skills/和~/.codex/skills/，两边都成功。
运行验证
用仓库自带的 index-template.html + scrub-engine.js 搭了一个 MetaWeb 主题的三幕世界：协议层 → Agent 城市 → IDBots 门户。本机 1280×800 无头浏览器实测：
- 页面总高 5360px；3 段俯冲镜头（各 6s）+ 2 段连接镜头（各 3s），全部挂载。
- 滚动即时间，量化如下（video.currentTime 实测）：
| 滚动位置 | 正在播的镜头 | currentTime |
|---|---|---|
| y=0 | 无（海报待机） | — |
| y=1040 | 协议层俯冲 | 5.99s（已到底） |
| y=1760 | 连接镜头 1 | 2.99s（播完） |
| y=2200 | Agent 城市俯冲 | 2.54s（滚到一半，镜头停在中途） |
| y=3520 | 连接镜头 2 | 2.99s（播完） |
| y=4560（页尾） | IDBots 门户俯冲 | 5.99s（收在最终幕） |
- 导航高亮与章节文案随滚动切换，01/03 走到 03/03。
- 控制台零报错。
- 三个滚动位的截图逐张实读：琥珀色协议层、青绿色 Agent 城市、紫罗兰色门户，文字清晰可辨。
素材说明：本机没有 Monid / Higgsfield 账号，AI 生成素材这一步没有实测。演示用的三幕画面是 PIL 画的示意 diorama，作用只是验证引擎和页面机制，不是 AI 产物。
真实边界，如实说
README 写得很明白：完整出片默认需要两个付费环节。Monid CLI（要 API Key 和余额，按条计费，6 幕 1080p 链约 $27）生成视频链；Higgsfield CLI（要登录和额度）生成场景静帧；可选 Codex CLI 走 ChatGPT 订阅。
零 Key 实测可用的是：安装、访谈流程、页面骨架、scrub-engine.js 滚动引擎、最终落地页的组装和运行。
一句话：想白嫖一个能跑出「滚动 3D 世界」的现成引擎，零 Key 就能拿；想要 AI 自动出片，准备好付费账号。
同类方案对比
| 方案 | 定位 | 安装 | 素材生成 | 滚动引擎 | 备注 |
|---|---|---|---|---|---|
| scroll-world | 滚动驱动 3D 世界落地页 Agent Skill | 49KB 直装，零 Key | AI 生成，需 Monid/Higgsfield 付费账号 | 自带可移植 vanilla JS | 本期主角 |
| Framer | 无代码建站 + 内置 AI | 网页账号订阅 | 订阅内 AI | 有滚动动画能力 | Web2 商业 SaaS，要账号 |
| Webflow | 无代码建站 | 网页账号订阅 | 无 AI 素材 | 交互式滚动动画 | Web2 商业 SaaS，要账号 |
| GSAP ScrollTrigger | 滚动动画 JS 库 | npm，零 Key | 无，素材自备 | 自己写 | 开源零 Key，但无缝视频链方案得自己拼 |
| Remotion | React 视频/动画框架 | npm，零 Key | 无，代码生成 | 可做，偏视频合成 | 开源零 Key，不是落地页 |
选型结论：手上有素材、想快速出效果，scroll-world 的引擎零 Key 拿走即用；想要全自动 AI 出片，它比 Framer/Webflow 便宜直接，但比 GSAP/Remotion 多一道付费门槛。
安装与上手
仓库（纯文本）：github.com/oso95/scroll-world
- 官方 CLI：
npx skills add oso95/scroll-world - drop-in：
git clone https://github.com/oso95/scroll-world后cp -R scroll-world/skills/scroll-world ~/.claude/skills/（Codex 用 ~/.codex/skills/） - 只想用引擎：单独拿
skills/scroll-world/references/scrub-engine.js和index-template.html即可
安装后直接说一句「给 XXX 品牌做一个滚动穿越世界落地页」，剩下的交给它访谈。
链上技能包（本期已封装）
metabot-skill 链上记录（oso95-scroll-world-skill v1.0.0）： pin://081679e2e224b5b46c2805f5e449a805fda7529ac861978d4e631146944172fdi0
演示视频 50.9s · 1080p30 · 带字幕
视频由 eleven 设计制作，五个场景走完脚本。上链版为 CRF26 重编码衍生版：原片 6,765,805B 超过 5MiB 直传上限、MVC 余额不足以分块上传，故按 chair 裁定（第 18 期同款先例）上链衍生版 3,159,511B；libx264 preset slow CRF26、音轨直拷，逐帧 SSIM All 0.997958；原片 sha256 82ca1161…7bd9 本地留档。