捲動動畫網站生成器
一句描述就能做一個網站，捲動就是鏡頭運動——俯衝進場景，飛出來，再落進下一個，全程不剪輯。
《Katagiri High — The Last Light》——在 Horimiya 世界裡為這一頁做出來的。在畫面裡捲動：三個場景、兩處接縫、一條連續的航程。
SENGOKU
SENGOKU
SENGOKU
Five Realms
Five Realms
Five Realms
Homer’s Odyssey
Homer’s Odyssey
Homer’s Odyssey實際打開看看。
打開作品，就在這裡用。
捲動網站是一段航程，不是幻燈片。
Studio 先造世界，每個場景出一張 16:9 靜幀，再生成把你從一個場景帶到下一個的鏡頭片段。交付的頁面是純 HTML 加原生 JavaScript：捲動位置決定影片時間，所以手機能跑、不依賴框架，體積大約等於三段短片。
- 接縫，不是剪切 — 每段銜接都用上一段最後一幀和下一段第一幀生成，接上是同一幀，而不是交叉淡化。
- 全場一個 look — 每個場景靜幀都從同一張母圖派生，所以第一場的港口和第三場的港口是同一個港口。
- 交付的是頁面，不是影片 — 你拿到一個可以開啟、fork、轉傳的網址。場景標題、眉題、數據列和導覽文字都是可以直接改的 HTML。
動手之前，大家會問的問題。
什麼叫捲動動畫網站？
捲動不只是讓頁面往下走，而是驅動一台鏡頭。每個捲動位置對應一幀畫面，訪客按自己的速度穿過場景，而不是看一段影片自己播。
需要 GSAP 或 Three.js 嗎？
不需要。引擎是原生 JavaScript，用捲動位置擦洗預渲染片段。你已經有 GSAP 或 Next.js 網站的話可以直接嵌進去，但這裡不強依賴任何一個。
一開始做幾個場景合適？
三個。16:9 下大約 25 MB 影片，載入很快，已經能讀成一段旅程。每多一個場景會多兩段片段，大約再加 9 MB。
手機上能用嗎？
能。小螢幕會拿到 640×360 的版本，擦洗跟著觸控捲動走，桌機那些大檔案根本不會載入。
做一次要多少生成？
三張靜幀、三段俯衝、兩段銜接，一共八個產物。開始前先問 Studio 要片段數量和模型，影片才是慢又花錢的部分。
做完還能改文案嗎？
能。場景標題、眉題、數據列、導覽文字都是已發佈頁面裡的普通 HTML，改字不用重新渲染任何一幀。
某一段生成失敗會怎樣？
建置會停下來，並告訴你是哪一段失敗。它不會拿佔位圖補上——假場景會毀掉接縫，也毀掉整段錯覺。
可以用現成 IP 或我自己的美術嗎？
可以。場景可以從一張參考圖派生，這一頁的世界也都是做在既有的 IP 世界裡的。如果要和某個設定對齊，就帶上一張角色設定圖或主視覺。
給一個地方三個停靠點。
Studio 生成場景、俯衝和接縫，然後發佈成一個你能捲動、能轉傳的頁面。就從這個海港開始，或者寫你自己的地方。