Scroll-World — Agent Skill 把任何品牌變成可滾動 3D 飛行世界

• URL: https://github.com/oso95/scroll-world
• Date Saved: 2026-07-13
• Source: GitHub
• Tags: creative-ai, dev-tools
• Repo: https://github.com/oso95/scroll-world (1.5k stars)

Summary

Scroll-World 是一個 agent skill（支援 Claude Code、Codex 等），一鍵生成沉浸式「scroll-through fly through the world」landing page — 滾動時鏡頭從場景外飛入內部，連續無剪接飛越多個場景。

原理：

1. 用 Higgsfield 生成等距透視場景圖（GPT Image 2）
2. 用 Seedance（image-to-video）生成鏡頭飛入動畫
3. 連接片段確保相鄰場景無縫銜接（從實際渲染幀生成）
4. Vanilla JS scrub engine 用滾動位置驅動播放時間軸

工作流程：

1. Interview — 品牌/行業 + pitch + 品牌色 + 場景順序
2. Generate — Higgsfield 生成靜態圖 + 飛入影片 + 連接影片
3. Wire up — config-driven scroll engine 組裝成完整飛行體驗

技術特點：

• Framework-agnostic：可用於 plain HTML、Next.js、Vue、Python served page
• 安裝方式：Claude Code plugin、Codex skills CLI、或手動複製
• 依賴 Higgsfield CLI（需帳號和 credits）+ ffmpeg

Skill 內容：

• SKILL.md（流程 + 接縫規則 + 注意事項）
• prompts.md（intake checklist + Higgsfield prompt 模板）
• pipeline.md（批次腳本）
• scrub-engine.js（可攜式滾動引擎）
• index-template.html（最小化獨立頁面）
• knockout.py（背景去除，浮動場景用）

適用場景： 品牌 landing page、產品展示（類似 Apple 滾動式產品頁的效果）