滾輪驅動的零剪接運鏡飛行
scroll-world 建立以使用者滾輪滾動控制運鏡進度的沉浸式著陸頁。鏡頭從場景外部俯衝進入內部，隨後穿透至下一場景，全程無縫串接且無任何畫面剪接痕跡。
核心生成架構分為三層：以一致的風格前導詞生成場景靜圖（N stills）、為每個場景渲染深入特寫視訊（N dive clips），以及透過首尾畫格精準鎖定相鄰場景的過渡銜接視訊（N-1 connector clips）。
接縫處必須嚴格維持 Frame-identical。連接片段的起始畫格與結束畫格直接從前一段已渲染視訊中抽出，並透過 --start-image 與 --end-image 同時約束，徹底避免跨場景轉場時的跳變問題。
訪談與風格前導
生成場景靜圖
深入運鏡片段
抽取邊界畫格
首尾鎖定連接片段
編碼與滾動引擎整合
「The camera genuinely moves, scroll only drives time. One continuous connected flight through a generated 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-worldCodex 與多 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三大運鏡架構與生成管線
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 大無縫渲染與工程守則：
字元級風格前導詞一致性
所有場景靜圖的 Prompt 開頭必須逐字使用完全相同的 Style Preamble（包含黏土微縮、等角視角、柔和光影與色盤 Hex 代碼）。提示詞的前後一致性是世界維持單一視覺觀感的根本。
來源 · references/prompts.md
邊界畫格必取自已渲染視訊
生成相鄰場景的過渡視訊（connector）時，絕對不可使用原始場景靜圖作為輸入。必須使用 ffmpeg 直接抽取已渲染深入視訊的最後一格與下一段的第一格，才能確保畫格無跳變。
來源 · SKILL.md · Step 5
全鏈維持單一視訊模型
整條視訊鏈必須由同一個模型（如 Seedance 2.0 或 Kling 3.0）算完。不同模型的色彩深度、運動慣性與噪點特徵不同，中途換模型即便首尾對齊仍會產生微小的視覺突變。
來源 · SKILL.md · Step 4
嚴格過濾無首尾約束的模型
只有同時支援 --start-image 與 --end-image 的模型才能用於連接片段。純 Reference 參考圖模型只能引導風格而無法鎖定畫格，物理上無法用於無縫運鏡拼接。
來源 · SKILL.md · Model Table
Kling 3.0 的原生 720p 特性
Kling 3.0 在 standard 模式下原生輸出 720p，且不支援 --resolution 參數傳遞；此外其音效預設為開啟，生成時必須明確加上 --sound off 避免生成不必要的音軌。
來源 · references/pipeline.md
Codex Exec 必須重定向輸入
使用 Codex CLI 本機平行生成場景靜圖時，指令後方必須加上 < /dev/null 重定向。若多個背景子程序共用 stdin，會導致程序掛起等待終端機輸入。
來源 · SKILL.md · Gotchas
原生 9:16 行動端與中央裁切
行動裝置的最佳體驗是原生生成 9:16 直式視訊鏈（Native Portrait Chain），而非中央裁切。中央裁切只保留寬螢幕中央 26% 畫面，僅適合作為點數不足時的應急方案。
來源 · SKILL.md · Step 1.6
GOP 8 高頻關鍵影格編碼
滾動著陸頁依賴使用者滾輪高頻觸發 currentTime 搜尋。視訊壓縮時必須使用 -g 8 -keyint_min 8 強制每 8 格插入一個 Keyframe，並開啟 faststart 確保網頁即時解碼。
來源 · references/pipeline.md · Step 6
從品牌訪談到全景視訊鏈產出
以下以精品手作茶飲品牌為例，展示 scroll-world 如何從需求訪談、生成一致性場景靜圖、抽取畫格、渲染無縫過渡視訊，最終組裝為純 JavaScript 滾動驅動頁面。
$ You › /scroll-world
claude: Claude(scroll-world)›
請告訴我這個微縮世界的主題：你的品牌、客戶或具體產品點子是什麼？
$ You ›
台灣精品高山茶飲品牌「山嵐製茶」，從高山茶園採摘、炭焙、門市萃茶到招牌冷萃瓶裝。
claude: 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 › 確認配置，開始執行生成。
ok: ✓ still farm.png (茶園階梯與採茶農)
ok: ✓ still roast.png (炭火焙茶桶與茶篩)
ok: ✓ still brew.png (旗艦門市萃茶吧檯)
ok: ✓ still plaza.png (露天竹座休憩廣場)
ok: ✓ still hero.png (冷萃茶瓶與漂浮茶葉)
ok: ✓ dive farm.mp4 (8s · 鏡頭下潛俯衝進入茶園小徑)
ok: ✓ dive roast.mp4 (8s · 屋頂掀開特寫焙火煙霧)
ok: ✓ dive brew.mp4 (8s · 鏡頭推入吧檯萃茶水流)
ok: ✓ dive plaza.mp4 (8s · 鏡頭低空掠過竹座茶客)
ok: ✓ dive hero.mp4 (8s · 環繞冷萃茶瓶細節)
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
ok: ✓ conn 1 (farm → roast · 5s)
ok: ✓ conn 2 (roast → brew · 5s)
ok: ✓ conn 3 (brew → plaza · 5s)
ok: ✓ conn 4 (plaza → hero · 5s)
ffmpeg -g 8 -keyint_min 8 -crf 20 -movflags +faststart
輸出 assets/vid/ (*.mp4) 與自包含 index.html
ok: 著陸頁就緒：滾動即精準對齊 3D 運鏡播放，全鏈 0 跳格。
「The value of this skill is the generation pipeline, the prompts, and the seam method — not the frontend framework.」
生成架構的核心驗收標準
透過嚴格的邊界畫格提取（Boundary Frame Extraction）與高頻關鍵影格編碼，整個著陸頁能以極低 CPU 資源流暢響應使用者的每一次滾動。
AI 視訊生成的操作邊界
自訂風格與全平台整合
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.」