做出會 捲動播放影片 與 3D 動態的高質感網站

Overview你會完成什麼

你在 YouTube 上看到的那種「滑一下整個畫面就動起來、有影片背景、有 3D」的網站，幾乎都是同一套配方堆出來的：Claude Code 寫前端 ＋ AI 生成的影片素材 ＋ GSAP ScrollTrigger 驅動捲動動畫。你參考的影片〈Claude Fable 5 Changed Web Design Forever〉示範的正是這條路線。

跟著這份教程走完，你會得到三樣東西：一份能直接貼進 Claude Code 的 Prompt 清單；一個已經接上 Higgsfield、能用講話的方式生成影片的 Claude Code；以及一個會隨著捲動播放影片的網頁範本。

Resources to copy可以直接抄的資源

先別急著寫程式。把下面這四類資源備好——原理、技術選型、Prompt、現成 repo——你之後給 Claude Code 的每一句話都會更準。

參考靈感與背後原理

「捲動影片／3D 網站」其實是好幾種技術的統稱，複雜度差很多。先分清楚你要的是哪一種，才不會殺雞用牛刀：

技術選型一覽

• GSAP + ScrollTrigger 必裝
  捲動動畫的核心。scrub:true 把動畫綁到捲動條、pin:true 釘住區塊，就是所有 scrollytelling 的基礎。多數情境免費。
  https://gsap.com/docs/v3/Plugins/ScrollTrigger/
• HTML5 <video> 背景
  最快加深度感的方法：hero 放一段 loop 影片。關鍵屬性 autoplay muted loop playsinline。
• Lenis 平滑捲動 加分
  讓捲動有「慣性／滑順」感，跟 ScrollTrigger 搭起來質感立刻上一階。
  https://github.com/darkroomengineering/lenis
• Three.js 選用
  真 3D／粒子場。Claude Code 可從自然語言 scaffold 出基本場景。
  https://threejs.org/
• Higgsfield MCP 生影片
  把 30+ 影片模型（Sora 2、Veo 3.1、Kling 3.0、Seedance 2.0…）接進 Claude Code，用講話生成背景影片。Part B 主角。

Prompt 範本（可直接複製）

這幾條是整套流程最常用的 Prompt。給 Claude Code 的建站 Prompt 用英文最穩，照著改名稱與風格即可。

GitHub repos & skills

• anthropics/skills · frontend-design
  Anthropic 官方「設計質感」技能，專門避免一眼 AI 味的版型。本教程 HTML 就照它的規範做。
  github.com/anthropics/skills · frontend-design/SKILL.md
• Shubham-ly/video-scrub-scroll
  最小可跑範例：用 GSAP ScrollTrigger 讓影片隨捲動 seek。直接 clone 來改最快。
  github.com/Shubham-ly/video-scrub-scroll
• GSAP video-scrub Gist（ksachikonye）
  單檔 gist，示範把 video.currentTime 綁到捲動。
  gist.github.com/ksachikonye/8c01488f0841f440d809a14a7c59335f
• CodePen · Control / Scrub Video（wisearts）
  線上可玩的 demo，看 position:fixed + object-fit:cover 的全螢幕影片寫法。
  codepen.io/wisearts/pen/ExZGrbZ
• greensock/GSAP
  GSAP 原始碼與型別定義；要查 ScrollTrigger 參數時的權威來源。
  github.com/greensock/GSAP
• darkroomengineering/lenis
  平滑捲動函式庫，質感升級必備。
  github.com/darkroomengineering/lenis

社群討論與延伸閱讀

• 參考影片：Claude Fable 5 Changed Web Design Forever（$10k website build）
  你提供的 ref，整套「Claude 建高質感網站」的示範。
  youtube.com/watch?v=1UmjkWlqKe0
• MindStudio：Build Animated 3D Websites with Claude Code
  最完整的圖文流程（影片背景、staggered cards、pinned scroll、Three.js 粒子），本教程多段取材自此。
  mindstudio.ai/blog/animated-3d-websites-claude-code-ai-video-generation
• YouTube：I Built an Animated 3D Website in 10 Minutes with Claude Code
  另一支實作向影片，適合看節奏感。
  youtube.com/watch?v=luh4Ov2LHZg
• GSAP 官方論壇：Video scroll animation
  scroll-scrub 影片卡頓、行動裝置相容性的疑難雜症都在這討論。
  gsap.com/community/forums/topic/32782-video-scroll-animation
• claudefa.st：Higgsfield MCP from Claude Code
  MCP 接法、模型怎麼選、async 輪詢機制講得最清楚。
  claudefa.st/blog/tools/mcp-extensions/higgsfield-mcp
• Higgsfield Discord
  模型更新、prompt 技巧、被 IP 擋掉怎麼 reroll，都能在這問。
  discord.gg/higgsfield

Hands-on讓 Claude Code 用 Higgsfield MCP 生成影片

這段把三件事一次做完：把 Higgsfield MCP 接上 Claude Code、用一句話生成背景影片、再把影片做成隨捲動播放的效果。最後附上可直接抄的 Prompt。

前置需求

• Claude Code 已安裝
  npm install -g @anthropic-ai/claude-code（macOS 也可 brew install anthropic-claude-code）。
• 一個 Higgsfield 帳號
  到 higgsfield.ai 註冊，免費額度即可開始，註冊不需信用卡。
• 本機 dev server 與瀏覽器
  npx serve 或 VS Code Live Server 都行；用 DevTools 除錯。

一行指令把 Higgsfield 的 MCP server 用 HTTP 註冊進 Claude Code，之後不需 API key、不需寫任何 glue code。

npm install -g @anthropic-ai/claude-code

claude mcp add --transport http higgsfield https://mcp.higgsfield.ai/mcp

第一次叫用 Higgsfield 工具時，Claude 會印出一個 OAuth 授權網址：在瀏覽器打開 → 用你的 Higgsfield 帳號登入授權 → 把授權碼貼回終端機。Token 會跨 session 保存，這是一次性設定。

claude mcp list
# higgsfield: https://mcp.higgsfield.ai/mcp - ✓ Connected

higgsfield: https://mcp.higgsfield.ai/mcp - ✓ Connected

先有影片、再寫程式——因為影片的色調會決定整頁的配色與排版。直接在 Claude Code 裡用講的就好。

壓縮影片再放進網頁

大影片會拖垮效能。用 HandBrake 或 FFmpeg 轉成 MP4 並壓到 5MB 以下（1080p loop 通常不需要更大）。順手也輸出一份 .webm。

ffmpeg -i hero_raw.mp4 -vf "scale=1920:-2" -c:v libx264 -crf 26 -preset slow -an hero.mp4

你要的效果有兩種實作路線。做法 A 是自動播放的背景影片；做法 B 是隨捲動條一格一格走的 scroll-scrub。多數網站兩者都會用到。

做法 A · 自動播放的全螢幕背景影片

最簡單、相容性最好。重點屬性：autoplay、muted（現代瀏覽器自動播放的必要條件）、loop、playsinline（iOS 必要）。

<section class="hero">
  <video class="hero-video" autoplay muted loop playsinline
         preload="auto" poster="hero-poster.jpg">
    <source src="hero.mp4" type="video/mp4">
    <source src="hero.webm" type="video/webm">
  </video>
  <div class="hero-content">
    <h1>Your Headline</h1>
  </div>
</section>

.hero { position: relative; overflow: hidden; }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero::after {              /* 暗化遮罩，依影片亮度調整 */
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 20, 0.55); z-index: 1;
}
.hero-content { position: relative; z-index: 2; }

做法 B · 隨捲動播放的 scroll-scrub 影片

這是 Apple 產品頁那種效果：影片不自動播，而是把 video.currentTime 綁到捲動進度。先載入 GSAP 與 ScrollTrigger：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

<div class="video-wrap" style="height: 300vh;">
  <video class="scrub-video" muted playsinline preload="auto" src="hero.mp4"></video>
</div>

gsap.registerPlugin(ScrollTrigger);

const video = document.querySelector(".scrub-video");

// 等 metadata 載入才拿得到 video.duration
video.addEventListener("loadedmetadata", () => {
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".video-wrap",
      start: "top top",
      end: "bottom bottom",
      scrub: true,     // 動畫跟著捲動條走
      pin: true        // 捲動期間把影片釘在畫面
    }
  });
  tl.fromTo(video, { currentTime: 0 }, { currentTime: video.duration });
});

.scrub-video {
  position: sticky; top: 0;
  width: 100%; height: 100vh;
  object-fit: cover;
}

把上面拆解的東西交回給 Claude Code 一次組裝。先把生成好的 hero.mp4 放進專案資料夾，再下這個 Prompt。

@media (prefers-reduced-motion: reduce) {
  .hero-video, .scrub-video { display: none; }
  .hero {
    background-image: url("hero-poster.jpg");
    background-size: cover;
  }
}

驗證它真的會動

起一個本機伺服器，逐項確認：

npx serve .
# 開 http://localhost:3000

1. Hero 影片自動播放、loop、靜音，字在影片上清楚可讀
2. 往下捲時，pinned 區的影片「跟著捲動」一格格前進（非自動播）
3. 三張卡片在進入視窗時依序淡入、上移
4. 開系統「減少動態效果」後重整 → 影片改成靜態海報圖

常見錯誤 & 解法

下一步

想再往上一層，可以：用 Soul Character 訓練固定角色／產品，讓多支影片視覺一致；把 hero 影片換成 canvas 影格序列（把影片拆成 PNG 序列逐格繪製）以換取更順的 scrub 與行動裝置相容性；或加一層 Three.js 粒子場疊在影片之上。每加一個效果，都先在手機上實測效能再決定保留。