scroll-cinematic — 一句話做 3D 滾動站

Scroll-Cinematic — 一鍵生成 3D 產品網站

這是什麼（請先閱讀）

病毒式傳播的「3D 滾動」效果不是 Three.js。它是一種Canvas 影像序列刮擦： 將一段簡短的動態影像匯出為約 180 張連續編號的 JPG，全部預先載入，然後根據滾動進度選擇要繪製到 <canvas> 上的影格。向前/向後滾動即可播放片段。再加上 Lenis 平滑滾動 + 與滾動同步的覆蓋文字，就能營造出高級 3D 的質感。所謂的「3D」完全來自於來源影片——而這些影片是由 Higgsfield 生成的。

技術棧：純 HTML + CSS + JS + Lenis（零建置，可在任何靜態伺服器上執行）。

必要條件

• Higgsfield MCP 已連接並有足夠點數（約 $1–2 / 站）。這是使用者必須設定的唯一項目。
• ffmpeg — 請勿要求使用者安裝。下面的步驟 0 會自動安裝（無需 Homebrew）。
• 此技能已安裝在 ~/.claude/skills/scroll-cinematic/。

步驟 0 — 確保 ffmpeg（先執行，務必執行）

執行 bash ~/.claude/skills/scroll-cinematic/scripts/ensure-ffmpeg.sh。若系統中已有 ffmpeg 則使用系統版本，否則下載靜態二進位檔到 /tmp/ffmpeg-bin/ffmpeg（macOS/Linux，無需 Homebrew）。萃取/壓縮腳本已預設使用該路徑。切勿因 ffmpeg 問題而阻礙建置。

流程 — 從單一提示開始執行所有步驟

1. 決定需求（適用於任何網站 — 除非主題不明確，否則無需額外提問）

根據使用者的提示，選定：網站類型、主角主題、氛圍/色調、品牌/名稱（若未提供則自行發想），以及 2 種主角動作。主角主題就是網站所要呈現的內容——可以是產品、人物/創辦人、建築/空間、料理、車輛，或抽象視覺。各網站類型的預設動作：

• 產品（瓶子、小工具、鞋子、化妝品）→ 360° 旋轉 + 爆炸/傾倒/揭露。
• 作品集 / 個人品牌 → 電影感人物肖像或抽象液態/幾何動態 + 慢速視差/環繞。
• 代理商 / App / SaaS → 抽象 3D 形狀/標誌變形或 UI-in-space + 光線飛越效果。
• 承包商 / 居家服務 / 房地產 → 建築物/住宅/工地的慢速環繞或飛越 + 細節揭露。
• 餐廳 / 美食 → 料理 360° 旋轉 + 食材/蒸氣動態或內部飛越。
• 健身 / 活動 / 旅遊 → 主題人物（運動員、人群、風景）的動態 + 全景鏡頭移動。 如果不確定，預設為一個主角環繞/飛越 + 一個揭露/視差片段。

2. 生成主角關鍵影格（Higgsfield generate_image）

• 模型：nano_banana_pro（最高品質 / 清晰度）。根據網站主題（產品、人物、地點、抽象）設定提示，強調強烈光線、有意的背景，「超銳利、擬真、8K、編輯/廣告風格」。16:9 比例。（作品集也可使用品牌色的抽象 3D 渲染，以避免肖像權/IP 問題。）
• 輪詢 job_display 直到 status:"completed"；保留工作 id（作為影片的起始影格）。

3. 生成 1–2 段電影感片段（Higgsfield generate_video）

• 模型：seedance_2_0，resolution:"1080p"，aspect_ratio:"16:9"，duration:6，medias:[{role:"start_image", value:<關鍵影格 id>}]。如果系統建議預設，則始終傳入 declined_preset_id:"24bae836-2c4a-48e0-89b6-49fcc0b21612"；如果建議不同的預設，則以該預設的 id 重試。
• 動作提示模式（選擇符合主題的方式）：
  • 旋轉台 —「平滑無縫的全 360 度旋轉，完成一整圈，保持居中」。
  • 飛越 —「緩慢連續的鏡頭向前飛行穿過/環繞 [建築物/空間/場景]，平滑推軌，深層視差」。
  • 揭露/爆炸 —「[內容/組件/元素]向外爆開或組合，並以慢動作漂浮」（保持在物體/場景情境——以利審核）。
  • 抽象 —「優雅的慢速變形液態金屬 / 玻璃 / 粒子形態漂移旋轉」。
• 同時生成兩個片段（在同一則訊息中發出兩個工具呼叫），然後輪詢 job_display。1080p 渲染約需 3–8 分鐘；輪詢間隔期間讓背景休眠。
• 成本： 先用 get_cost:true 預估一次；每個 1080p 片段約 54 點數。若使用者點數不足需確認。

4. 處理渲染結果

• completed → 用 curl 下載 results.rawUrl。
• nsfw 或 failed → 退款，重新嘗試。審核系統可能對抽象的「漂浮藥丸 / 溶解人物」誤判；改用產品情境用詞，或將該片段切換為 grok_video_v15（resolution:"720p"，審核較寬鬆）。產品旋轉/爆炸在 1080p 下通常能通過。
• 如有重新嘗試請告知使用者；切勿謊稱未渲染的片段已渲染完成。

5. 切割並壓縮影格（ffmpeg）

• scripts/extract-frames.sh <clip.mp4> frames/<name> 180 → 約 179 張連續編號的 JPG。
• scripts/compress-frames.sh frames/<name> 1600 88 → 寬度 1600px，品質 88（清晰，每段 <~15MB）。
• 每個片段一個資料夾（例如 frames/spin、frames/explode）。

6. 從 templates/ 建置網站

• 將 templates/index.html、styles.css、scroll-cinematic.js 複製到專案中。
• 編輯 SCRUB_SECTIONS 設定（index.html 底部）— 每個片段一個項目： { section:"#hero", frameCount:179, bg:"#0a0a12", framePath:(i)=>\frames/spin/frame_${String(i).padStart(4,"0")}.jpg` }`。
• 撰寫品牌文案、色調（CSS 變數）、優點/顏色變化/特色區塊、數據、行動呼籲。
• 色相偏移技巧 用於產品變體/顏色變化（無需額外生成）： ffmpeg -i base.png -vf "hue=h=120:s=1.15" variant.png。

7. 在 localhost 啟動

• 將 templates/Launch Demo.command 複製到專案中，修改 PORT + name，chmod +x。
• 啟動（python3 -m http.server <port>），用 curl 確認頁面及一個影格返回 200，然後 open URL。
• 告訴使用者 URL，並說明雙擊 .command 可重新啟動以便錄製。

引擎規則（已在 templates/scroll-cinematic.js 中）

• 預先載入每個影格；首次載入時繪製影格 0；僅在影格索引變更時重新繪製。
• 黏性舞台：外部區塊 height: 420–600vh，內部 position:sticky; top:0; height:100vh。 進度 = clamp(-rect.top / (rect.height - innerH), 0, 1)。在 rAF 迴圈中節流。
• 滿版繪製 + HiDPI（devicePixelRatio，上限 2）。從 Lenis rAF 迴圈驅動更新（對任何滾動來源都穩定）。覆蓋文字根據每行 [in,out] 進度視窗淡入淡出。
• 多區塊：SCRUB_SECTIONS 陣列；引擎會跳過元素不存在的區塊。

已知問題

• 影格數量越多/尺寸越大 = 載入越慢 → 保持 1600px / q88 / ~180 影格。
• 僅使用連續動作片段（無硬切——向後刮擦時會不美觀）。
• 無頭截圖工具在捲動時會將黏性 Canvas 區塊畫面變空白；需透過像素取樣驗證，並在真實瀏覽器中檢視。
• python http.server 預覽在閒置時會關閉——.command 啟動器是持久的示範方式。

檔案

• templates/index.html、styles.css、scroll-cinematic.js — 多區塊刮擦網站。
• templates/CinematicReveal.tsx — React/Next 可選用的內嵌元件。
• templates/Launch Demo.command — 雙擊啟動 localhost 啟動器。
• scripts/extract-frames.sh、scripts/compress-frames.sh — ffmpeg 流程。