scroll-world：用 Claude 做出 3D 滾動網站

你可能看過那種網站：一邊往下滑，鏡頭一邊從場景外面飛進去、穿過一個又一個空間，中間完全沒有剪接，像在看一段連續的空拍。這種「scroll-scrubbed」網站以前要請團隊做，現在有一個叫 scroll-world 的 Skill，可以讓 Claude Code 一步一步帶你做出來。

它在做什麼？

scroll-world 是給 Claude Code、Codex 等支援 SKILL.md 的 Agent 用的 Skill。依 README 的描述，它會替任何產業或品牌，打造一個「飛越世界」的滾動式 landing page：

1. 用 AI 生成一組風格一致的等角視角（isometric）場景圖
2. 用 AI 影片模型，把一個個場景串成 連續、不剪接 的鏡頭飛行
3. 把影片做成跟著捲動播放的網頁，滑到哪、鏡頭就飛到哪

官方 demo 裡有珍奶店、海景別墅、電動車工廠等不同主題，可以看出它適用的範圍很廣。

怎麼安裝？

Claude Code（官方建議用 plugin）：

/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-world

裝好之後，直接跟 Claude 說你要做一個 scroll-through world landing page，或輸入 /scroll-world。

用其他 Agent（例如 Codex）也可以透過 Vercel 的 skills CLI 安裝：

npx skills add oso95/scroll-world

先準備好這些（重要）

這個 Skill 不是免費一鍵生成，它會呼叫付費的 AI 圖片與影片服務。README 列出的需求：

• Monid CLI（預設的影片串接後端，使用 Seedance 2.0，依片段計費）
• Higgsfield CLI（產生場景靜態圖，也是影片的備援）
• ffmpeg / ffprobe
• Python 3 與 Pillow
• （選用）Codex CLI：可用 ChatGPT 訂閱來生成場景圖

費用參考：官方寫明，一條 6 個場景的 1080p 影片串接大約 27 美元，用多少付多少、沒有月費。

適合誰？

• 想幫品牌、活動、作品集做一個「很有記憶點」的首頁
• 接案做網站，想用新玩法提高報價的人
• 想研究 AI 影片怎麼和網頁互動結合的開發者

這類沉浸式網站外包報價通常不便宜；用這個 Skill，主要成本變成 AI 生成費用和你自己的調整時間。

要注意的地方

• 需要一點終端機操作基礎，第一次設定 CLI 和帳號會花一些時間
• 生成結果要自己挑、自己調，不是每次都一次到位
• 費用會隨場景數和解析度增加，先用少量場景試做

實際做一個的流程大概長這樣

1. 跟 Claude 說明品牌或主題，例如「一間做手搖飲的品牌，從茶園到門市」
2. Skill 會先規劃 5–6 個場景，生成場景靜態圖讓你確認風格
3. 確認後，用 AI 影片把場景一段段串成連續的鏡頭飛行
4. 最後組成網頁：捲動時播放對應的影片片段，並加上每個場景的標題文字

整個過程 Claude 會一步一步問你、等你確認，所以就算不熟前端也能跟著做完。建議第一次先用 3–4 個場景試做，確認風格和費用都 OK，再做完整版。

資料來源

• GitHub：https://github.com/oso95/scroll-world

想看更多 AI 工具整理，追蹤 IG @aihub.tw。