AI Agent 技能 · 3D 捲動敘事著陸頁生成器

將任何品牌
轉化為 3D 捲動
微型世界

scroll-world 是一套適用於 Claude Code、Codex 與相容 Agent 的自動化技能。它透過 AI 生成連續無縫的 3D 運鏡視訊，並以滾輪位置精準控制播放進度，為任何品牌打造如蘋果產品頁或 Emons 物流站般零接縫穿梭的微縮世界著陸頁。

8.6k

GitHub Stars

支援運鏡架構

畫面剪接斷點

MIT

開源授權

專案定位

滾輪驅動的
零剪接運鏡飛行

scroll-world 建立以使用者滾輪滾動控制運鏡進度的沉浸式著陸頁。鏡頭從場景外部俯衝進入內部，隨後穿透至下一場景，全程無縫串接且無任何畫面剪接痕跡。

核心生成架構分為三層：以一致的風格前導詞生成場景靜圖（N stills）、為每個場景渲染深入特寫視訊（N dive clips），以及透過首尾畫格精準鎖定相鄰場景的過渡銜接視訊（N-1 connector clips）。

接縫處必須嚴格維持 Frame-identical。連接片段的起始畫格與結束畫格直接從前一段已渲染視訊中抽出，並透過 --start-image 與 --end-image 同時約束，徹底避免跨場景轉場時的跳變問題。

scroll-world 核心生成管線

訪談與風格前導→ 生成場景靜圖→ 深入運鏡片段→ 抽取邊界畫格→ 首尾鎖定連接片段→ 編碼與滾動引擎整合

「The camera genuinely moves, scroll only drives time. One continuous connected flight through a generated world.」

— scroll-world 官方專案說明

安裝與環境設定

外掛市集與
Skills CLI 安裝

scroll-world 支援作為 Claude Code 外掛、透過 Vercel Skills CLI 安裝至 Codex 與 20+ 款相容 Agent，或直接手動複製技能資料夾。

# Claude Code 官方外掛市集安裝
/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-world
      

Codex 與多 Agent 安裝（Vercel Skills CLI）

使用 Vercel Skills CLI 可自動將技能派發至 Codex、Cursor 或其他相容環境：

# 透過 skills CLI 派發至 Codex
npx skills add oso95/scroll-world -a codex

# 或手動複製到技能目錄
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
      

環境依賴與計費路徑。視訊鏈預設採用 Monid CLI（Seedance 2.0，以美元按片計費；6 場景 1080p 鏈約 $27），並以 Higgsfield CLI 作為備用點數計費與靜圖生成（gpt_image_2）。若具備 Codex CLI，靜圖可透過 ChatGPT 訂閱的 $imagegen 免點數生成。本機需具備 ffmpeg、ffprobe 與 Python 3（Pillow）。

運鏡語法與能力地圖

三大運鏡架構與
生成管線

scroll-world 將空間著陸頁拆解為標準化生成階段與運鏡控制語法。根據品牌調性與場景需求，可自由選用不同的攝影機路徑架構與算力後端。

Camera · 01

Fly-through (Arch B)

俯衝穿梭旗艦模式

鏡頭深入場景內部特寫，隨後拉起並空拍躍遷至下一個微縮場景。角度富變化，為預設微縮黏土推薦風格。

Camera · 02

Walkthrough (Arch A)

單向推進漫遊模式

單一向前的連續飛行，穿透各場景門窗與結構而不往後拉回。適合寫實建築與沉浸式導覽。

Camera · 03

Locked-iso (Arch A)

鎖定等角滑行模式

鏡頭維持固定高角度等角視野，世界於下方平移滑過，無旋轉與翻轉。極度冷靜且算力重跑成本最低。

Stills · 04

gpt_image_2 / Codex

場景靜圖生成

以位元組級一致的風格前導詞生成 3:2 高清場景圖，奠定一致的光影、色調與微縮材質基礎。

Video · 05

monid seedance-2.0

預設視訊鏈算力

透過 Monid 按片美元計費（1080p/720p/480p），具備原生首尾畫格鎖定能力，無訂閱月費過期壓力。

Video · 06

higgsfield / kling3_0

備用算力與換道

作為備用點數計費管道，提供 kling3_0 視訊生成（原生 720p、--sound off）與 NSFW 敏感詞換道。

Seam · 07

ffmpeg frame extraction

邊界畫格精準抽取

使用 ffmpeg 從已渲染完成的深入視訊抽出最後一格與第一格，作為跨場景連接片段的絕對錨點。

Seam · 08

frame-locked connector

零跳接過渡生成

同時傳入 --start-image 與 --end-image 約束過渡片段，消除跨場景畫格突變（Pop），達成連續飛行。

Mobile · 09

native 9:16 portrait

原生直式行動鏈

非粗暴裁切，而是為手機原生渲染 9:16 直式視訊鏈與專屬畫布，具備 iOS 視訊預熱與流暢觸控優化。

Engine · 10

scrub-engine.js

獨立滾動核心引擎

零框架依賴的原生 JavaScript，自行構建 DOM 並注入 CSS，以滾輪位置精準對齊 video.currentTime。

Asset · 11

knockout.py

背景去背懸浮島嶼

利用邊界連通洪泛填充（Flood Fill）演算法，去除外部純色背景同時完整保留場景內部同色牆面。

Encode · 12

ffmpeg scrub encoding

關鍵影格高頻編碼

以 -g 8 -keyint_min 8、crf 20、無音軌與 faststart 壓制，確保滑鼠滾輪任意 seek 皆無延遲卡頓。

運鏡架構與視覺風格決策表

品牌視覺情境	推薦運鏡架構	生成策略與特點
黏土微縮模型 (Clay Diorama)	`Architecture B (Fly-through)`	活潑、大弧度空拍躍遷、屋頂自動掀開特寫
現代寫實建築 / 奢華空間	`Architecture A (Walkthrough)`	單向穿透門窗與玻璃、無拉回倒退動作
工業物流 / 產品產線	`Architecture A (Locked-iso)`	固定等角視角、冷靜平移、算力消耗最低
預算有限 / 快速預覽 (Previz)	`Monid 480p / Mini 720p`	成本降至 1/4，先行驗證故事節奏與接縫

官方架構原則

零接縫畫格鎖定的
核心工程守則

要達成如蘋果官網般流暢的 3D 著陸頁，AI 生成階段的邊界條件至關重要。以下為官方整理的 8 大無縫渲染與工程守則：

TIP 01

字元級風格前導詞一致性

所有場景靜圖的 Prompt 開頭必須逐字使用完全相同的 Style Preamble（包含黏土微縮、等角視角、柔和光影與色盤 Hex 代碼）。提示詞的前後一致性是世界維持單一視覺觀感的根本。

來源 · references/prompts.md

TIP 02

邊界畫格必取自已渲染視訊

生成相鄰場景的過渡視訊（connector）時，絕對不可使用原始場景靜圖作為輸入。必須使用 ffmpeg 直接抽取已渲染深入視訊的最後一格與下一段的第一格，才能確保畫格無跳變。

來源 · SKILL.md · Step 5

TIP 03

全鏈維持單一視訊模型

整條視訊鏈必須由同一個模型（如 Seedance 2.0 或 Kling 3.0）算完。不同模型的色彩深度、運動慣性與噪點特徵不同，中途換模型即便首尾對齊仍會產生微小的視覺突變。

來源 · SKILL.md · Step 4

TIP 04

嚴格過濾無首尾約束的模型

只有同時支援 --start-image 與 --end-image 的模型才能用於連接片段。純 Reference 參考圖模型只能引導風格而無法鎖定畫格，物理上無法用於無縫運鏡拼接。

來源 · SKILL.md · Model Table

TIP 05

Kling 3.0 的原生 720p 特性

Kling 3.0 在 standard 模式下原生輸出 720p，且不支援 --resolution 參數傳遞；此外其音效預設為開啟，生成時必須明確加上 --sound off 避免生成不必要的音軌。

來源 · references/pipeline.md

TIP 06

Codex Exec 必須重定向輸入

使用 Codex CLI 本機平行生成場景靜圖時，指令後方必須加上 < /dev/null 重定向。若多個背景子程序共用 stdin，會導致程序掛起等待終端機輸入。

來源 · SKILL.md · Gotchas

TIP 07

原生 9:16 行動端與中央裁切

行動裝置的最佳體驗是原生生成 9:16 直式視訊鏈（Native Portrait Chain），而非中央裁切。中央裁切只保留寬螢幕中央 26% 畫面，僅適合作為點數不足時的應急方案。

來源 · SKILL.md · Step 1.6

TIP 08

GOP 8 高頻關鍵影格編碼

滾動著陸頁依賴使用者滾輪高頻觸發 currentTime 搜尋。視訊壓縮時必須使用 -g 8 -keyint_min 8 強制每 8 格插入一個 Keyframe，並開啟 faststart 確保網頁即時解碼。

來源 · references/pipeline.md · Step 6

完整生成實例

從品牌訪談到
全景視訊鏈產出

以下以精品手作茶飲品牌為例，展示 scroll-world 如何從需求訪談、生成一致性場景靜圖、抽取畫格、渲染無縫過渡視訊，最終組裝為純 JavaScript 滾動驅動頁面。

~/projects/craft-tea-world · claude code · scroll-world

You › /scroll-world

[loaded ~/.claude/skills/scroll-world/SKILL.md] [Step 0: Monid CLI ok · ffmpeg ok · python3-PIL ok]

Claude(scroll-world)› 請告訴我這個微縮世界的主題：你的品牌、客戶或具體產品點子是什麼？

You › 台灣精品高山茶飲品牌「山嵐製茶」，從高山茶園採摘、炭焙、門市萃茶到招牌冷萃瓶裝。

Claude › [Step 1: 規格確認] · 色盤：茶霜乳白 #F5EDE0、抹香綠 #8FB98A、琥珀茶湯 #C88A5A、焙火深紫 #3A2E48 · 藝術風格：Soft matte clay diorama, isometric, tilt-shift miniature · 運鏡架構：Architecture B (Fly-through 俯衝特寫 + 空拍躍遷) · 場景段落 (5 段)：farm → roast → brew → plaza → hero (招牌冷萃瓶) · 視訊後端：Monid seedance-2.0 (1080p · 5 stills + 5 dives + 4 conns ≈ $22.5 USD)

You › 確認配置，開始執行生成。

[Step 2: 生成 5 張場景靜圖 · gpt_image_2 · 2k 3:2] ✓ still farm.png (茶園階梯與採茶農) ✓ still roast.png (炭火焙茶桶與茶篩) ✓ still brew.png (旗艦門市萃茶吧檯) ✓ still plaza.png (露天竹座休憩廣場) ✓ still hero.png (冷萃茶瓶與漂浮茶葉)

[Step 4: 渲染 5 段深入運鏡 · Seedance 2.0 1080p · --start-image] ✓ dive farm.mp4 (8s · 鏡頭下潛俯衝進入茶園小徑) ✓ dive roast.mp4 (8s · 屋頂掀開特寫焙火煙霧) ✓ dive brew.mp4 (8s · 鏡頭推入吧檯萃茶水流) ✓ dive plaza.mp4 (8s · 鏡頭低空掠過竹座茶客) ✓ dive hero.mp4 (8s · 環繞冷萃茶瓶細節)

[Step 5: 邊界畫格抽取與首尾鎖定連接片段 · ffmpeg + Seedance 2.0] ffmpeg -ss 0 -i dive_roast.mp4 -> first_roast.png ffmpeg -sseof -0.15 -i dive_farm.mp4 -> last_farm.png Seedance 2.0 --start-image last_farm.png --end-image first_roast.png ✓ conn 1 (farm → roast · 5s) ✓ conn 2 (roast → brew · 5s) ✓ conn 3 (brew → plaza · 5s) ✓ conn 4 (plaza → hero · 5s)

[Step 6 & 7: 滾動編碼與引擎組裝] ffmpeg -g 8 -keyint_min 8 -crf 20 -movflags +faststart 輸出 assets/vid/ (*.mp4) 與自包含 index.html 著陸頁就緒：滾動即精準對齊 3D 運鏡播放，全鏈 0 跳格。

「The value of this skill is the generation pipeline, the prompts, and the seam method — not the frontend framework.」

— scroll-world 專案核心價值

生成架構的核心驗收標準

透過嚴格的邊界畫格提取（Boundary Frame Extraction）與高頻關鍵影格編碼，整個著陸頁能以極低 CPU 資源流暢響應使用者的每一次滾動。

限制與安全條件

AI 視訊生成的
操作邊界

預先計算算力與金錢預算。6 場景 1080p 視訊鏈（5 靜圖 + 5 深入 + 4 連接）約需耗費 27 美元或相當之點數。執行前務必於 Step 1 計算並向使用者確認，避免生成中途因餘額不足中斷。
macOS 內建 Bash 3.2 相容性。macOS 預設的 bash 3.2 不支援關聯陣列（declare -A）。自編批次處理腳本請遵循標準陣列語法或改用 POSIX 寫法。
視訊生成需背景非同步執行。Higgsfield 與 Monid 每次視訊生成耗時約 3–8 分鐘。請務必在背景（detached）執行並透過日誌輪詢進度，切勿以前台阻塞方式呼叫。
室內寫實場景安全過濾器觸發。寫實室內場景有時會誤觸 Seedance 的 NSFW 安全過濾機制。遇到此情況應換道至 kling3_0（Higgsfield 專用）或微調提示詞中的物體描述。
嚴格限制過渡片段之模型。不支援 --end-image 的模型（如 Hailuo-2.3 或 Kling Turbo）無法用於 Architecture B 的連接片段生成，僅能用於 Architecture A 單向推進。
嚴禁混用不同視訊模型。即使畫格完全對齊，不同模型在色彩渲染、噪點與動作慣性上仍有差異，混用模型會導致明顯的畫質跳變。
瀏覽器解碼效能取決於編碼參數。若未依照 -g 8 -keyint_min 8 進行高頻關鍵影格編碼，行動裝置或低階電腦在滾動時會產生顯著的掉格與延遲。
iOS Safari 行動端觸控預熱。iOS 對影片播放有嚴格的省電限制，頁面加載時需先透過輕量 touchstart 事件對 video 標籤進行預熱解碼。

進階路徑

自訂風格與
全平台整合

scroll-world 的核心優勢在於其產出的視訊資產與純 JavaScript 滾動引擎完全獨立於前端框架。你可以進一步探索多元藝術風格與現代 Web 技術整合。

進階實作地圖

1. 擴展多樣化藝術風格。嘗試更換風格前導詞，例如平面層疊紙雕（Papercraft）、夜間霓虹（Neon Night）或停格黏土動畫（Claymation），打造獨一無二的品牌調性。

2. 整合 React / Next.js / Vue 現代框架。將 references/scrub-engine.js 的滾動驅動邏輯封裝為 React Hook 或 Vue Composable，無縫嵌入企業官網。

3. 多層視差背景與 3D 空間音效。使用 knockout.py 將場景去背為透明 WebP/WebM，結合 Web Audio API 根據滾動距離觸發空間化環境音效。

4. CDN 邊緣分段載入與快取最佳化。將 MP4 視訊片段分段部署至 Cloudflare R2 或邊緣節點，搭配 Preload 策略實現毫秒級無感緩衝。

5. 批次自動化流水線建置。利用 GitHub Actions 或本機背景工作排程，將品牌色盤、產品資料庫與 AI 視訊鏈整合為全自動著陸頁產生器。

延伸閱讀與參考資源

① SKILL.md：完整生成流程、面試規格與模型相容表。
② pipeline.md：相容 Bash 3.2 的全套自動化批次生成腳本。
③ prompts.md：風格前導詞、深入運鏡與連接片段提示詞庫。

「One continuous connected flight through a generated world.」

— scroll-world 專案願景