涵蓋 Hero 動態背景、捲動動畫、設計原則與工具分工。
核心觀念：動效的分層
網頁動效分三層，分工清楚才不會互相干擾：
| 層級 | 關注 | 代表工具 |
|---|---|---|
| Hero 動態背景 | 頁面載入時的 wow factor | Nano Banana + Kling / Veo |
| 捲動手感 | 捲動本身是否順暢 | Lenis（smooth scroll） |
| 捲動觸發動畫 | 捲動時元素如何出現/變化 | GSAP ScrollTrigger |
Hero 動態背景：對抗 AI slop 的單一武器
何時用：landing page / 專案官網的首屏，想快速拉開與 AI 模板的差距。
對很多需要首屏記憶點的網站來說，動態 Hero 是很有效的差異化手段；重點不是炫技，而是用相對低成本把視覺記憶點做出來。核心流程通常是 Image → Video → Code：
- 生靜態圖：Nano Banana（Google 官方對 Gemini 原生圖像生成功能的名稱）生成 hero 底圖
- 轉影片：Kling / Veo 把靜態圖轉成動態
- 組網頁：Claude Code 配合 21st.dev 元件庫組 hero section
分階段比一次到位穩定——別想用一個 prompt 直接生成動態 hero。
實作原則
- 極慢細膩：prompt 寫「keep it static and have extremely slow and subtle motion」，避免浮誇干擾閱讀
- Mobile 退回靜態：不讓手機載完整影片，減流量、提升載入速度
- 控制 enhancement：如果生成工具的 enhancement / creativity 類選項讓畫面過度戲劇化，優先把它降下來或關掉
- 多次迭代：不期望一次成功，wow factor ≠ 壓倒觀看者，less is more
捲動動畫：GSAP + Lenis 分工
何時用：portfolio、產品 landing page、要做 storytelling 捲動體驗。
兩個函式庫各負責一層，互補不重疊：
- Lenis：控制「捲動本身的手感」——smooth scroll library，讓底層慣性順暢
- GSAP：控制「捲動時發生什麼」——元素淡入、視差、pin 住、時間軸編排（ScrollTrigger 是 GSAP 的 plugin）
為什麼要搭配
在很在意捲動手感的專案裡，單靠原生 scroll + GSAP 常不夠；Lenis 讓底層捲動更柔順後，GSAP 的動畫觸發也通常更自然。
把「做什麼」和「怎麼捲」拆成兩層，是高水準前端網站的常見做法。
靈感來源
找 hero 動態與捲動體驗範例：
- Awwwards — 得獎作品幾乎都有細膩動效
- Pinterest / Dribbble — 截圖靈感
- Midjourney — 生成靜態視覺素材
工具速查
| 情境 | 推薦工具 | 說明 |
|---|---|---|
| 生靜態 hero 圖 | Nano Banana / Nano Banana Pro / Midjourney | 圖片生成 |
| 靜態圖轉影片 | Kling / Veo | 影片生成，避免過度 enhancement |
| 組 hero section | 21st.dev + Claude Code | 預建元件加速 |
| 順暢捲動 | Lenis | smooth scroll library |
| 捲動觸發動畫 | GSAP ScrollTrigger | 動畫引擎 |
常見陷阱
徵兆：Hero 動畫過於浮誇，反而分散注意力
- 原因：動態幅度太大
- 解法：prompt 加
extremely slow and subtle，關閉 enhance
徵兆：捲動時動畫觸發生硬
- 原因：底層捲動手感與動畫層混在一起處理
- 解法：把「怎麼捲」交給 Lenis，把「捲動時發生什麼」交給 GSAP
徵兆：Mobile 載入慢，流量爆表
- 原因：桌機/手機共用完整影片
- 解法：
<picture>或媒體查詢，mobile 退回靜態圖
徵兆：影片內容跟 prompt 不符
- 原因：生成工具的 enhancement / creativity 類選項把畫面推得太滿
- 解法：先降低 enhancement，再用更具體的 motion prompt 微調
相關主題
- Claude-Code-前端設計工作流 — Layer 6 個人化章節引用此 MOC
- DESIGN.md-官方規格 — 設計系統的靜態規格
- Stitch — 整體視覺生成工具
來源卡片
- Nano-Banana-動態-Hero-Section — Hero 動態影片觀念與流程
- GSAP-與-Lenis-捲動動畫分工 — 捲動動畫兩層分工