Cinematic Web — 有意的動畫
用於建構電影級網頁體驗的技能：網站看起來像一部電影，捲軸就是攝影機，每個元素都以特定的時間、重量和優雅感進入畫面。核心技術棧是 Next.js + Tailwind + GSAP + ScrollTrigger + Lenis，但動畫核心（動畫系統）可移植到純 HTML/CSS、WordPress/Divi 和 LearnWorlds。
核心哲學： 電影感網站並不求快——它們是有意地慢。 匆忙是優雅的天敵。在撰寫任何程式碼之前，動畫決策已經決定；程式碼只是服從。
黃金法則（永不打破的原則）
三個套件，三項責任。混淆它們是行動端捲動抖動和錯誤的首要原因：
| 套件 | 唯一責任 | 絕不做的事 |
|---|---|---|
| Lenis | 平滑捲動（慣性、捲動的「重量」） | 不控制元素動畫 |
| GSAP | 元素移動（位置、透明度、縮放） | 不控制頁面捲動 |
| ScrollTrigger | 編排——何時/如何在捲動時觸發動畫 | 不執行自己的捲動循環 |
專業人士與業餘者的差異在於：Lenis 和 ScrollTrigger 必須共用同一個時間循環 (gsap.ticker)。 如果它們在不同的 RAF 中執行，scrub 就會抖動。規範整合方式在 assets/lib/lenis-provider.tsx 中——務必使用此模式，絕不使用兩個獨立的 requestAnimationFrame。
// 整合核心（完整細節請見 references/01-setup.md）：
lenis.on('scroll', ScrollTrigger.update); // Lenis 每次捲動時通知 ScrollTrigger
gsap.ticker.add((time) => lenis.raf(time * 1000)); // GSAP 驅動 Lenis 的 RAF（單一時間來源）
gsap.ticker.lagSmoothing(0);
動畫系統（令牌，非即興發揮）
「藝術精煉」不是在最終階段靠視覺檢查——而是從一開始就透過集中於 assets/lib/motion.ts 的強制性令牌來實施。 所有動畫都從此處提取。這使得精煉變成確定性的。
標準持續時間（秒）：
| 令牌 | 值 | 用途 |
|---|---|---|
fast | 0.6 | 絕對最小值。任何電影感動畫不得低於 0.6 秒。 |
base | 0.9 | 文字和圖片的標準顯示動畫 |
slow | 1.2 | 英雄區、章節進入、呼吸時刻 |
epic | 1.8 | 錨點轉場、「攝影機時刻」 |
標準緩動函數（動畫的「簽名」）：
| 令牌 | 值 | 感覺 |
|---|---|---|
out | power3.out | 預設。 果斷的進入，優雅地減速 |
inOut | power3.inOut | 來回移動（固定、攝影機） |
expo | expo.out | 戲劇性的顯示，高速度對比 |
soft | power2.out | 微妙的互動 |
精煉規則（第 5 階段）： 任何少於 0.6 秒的過場都將延長。任何非
power或expo的ease（例如linear、back、bounce、elastic）都會被替換——它們會破壞電影感的沉穩。順序元素之間的stagger延遲：0.15–0.2 秒。
工作流程——5 個階段
依序執行。每個階段都有一個參考檔案，內含完整且可直接貼上的配方。在為該階段生成程式碼之前，請先閱讀該階段的參考檔案。
第 1 階段——專案聖經（永遠不要讓 AI 猜測）
在任何元件之前，先建立規則。使用 assets/CLAUDE.md 的模板在專案根目錄建立/更新 CLAUDE.md，並依照 references/01-setup.md 的指示設定技術棧。
- 安裝：
gsap @gsap/react lenis（如果是新專案，則加上 Next/Tailwind）。 - 將黃金法則和動畫系統寫入
CLAUDE.md。 - 將
assets/lib/lenis-provider.tsx和assets/lib/motion.ts複製到專案中。 - 先不要生成元件。 先打好基礎。
第 2 階段——電影級英雄區
第一印象定義基調：在第一次互動之前就展現張力和流暢感。完整配方在 references/02-hero.md。
- 全螢幕，背景循環影片（附圖片備援和覆蓋層）。
- 文字以平滑顯示效果（遮罩 +
y/opacity，slow+expo.out）搭配stagger順序出現。 - 當使用者開始向下捲動時，捲動指示器消失。
第 3 階段——「攝影機目光」的捲動
魔法發生的地方：捲動變成攝影機移動。配方（固定、順序、視差、scrub）在 references/03-scroll-camera.md。
- 透過 ScrollTrigger 實現固定捲動章節。
- 元素以順序（
stagger0.15–0.2 秒）搭配power3.out進入。 - 受控的捲動（
scrub），而非自由動畫——時間跟隨使用者的手指。
第 4 階段——馴服行動端的混亂
複雜動畫在行動裝置上故障是其固有設計問題，而非偶然。策略在 references/04-mobile-a11y.md。
- 使用
gsap.matchMedia()區分桌面版≠行動版——而不是在程式碼中散佈if。 - 尊重
prefers-reduced-motion（無障礙 + 防暈 + 法律風險）。 - 效能：只動畫
transform/opacity，避免在觸控裝置上使用沉重的pin，檢查 Lenis↔ScrollTrigger 衝突。 - 修正行動版時，不要改變桌面版的美感。
第 5 階段——藝術精煉
區分「有動畫」與「電影感」的最終打磨。檢查清單在 references/05-refinamento.md。
- 所有少於 0.6 秒的過場 → 延長。
- 所有非
power/expo的ease→ 替換。 - 檢查一致性：所有動畫都從
motion.ts提取嗎？時間是否協調？
品質檢查清單（交付前請走一遍）
- Lenis 和 ScrollTrigger 共用
gsap.ticker（無雙重 RAF）。 - React 動畫使用
useGSAP（來自@gsap/react）搭配scope→ 自動清理，無跨路由洩漏。 - 包含 GSAP 的元件設為
"use client"並註冊外掛（gsap.registerPlugin(ScrollTrigger, useGSAP)）。 - 所有時間/緩動都來自
motion.ts——無散落的魔術數字。 -
gsap.matchMedia()覆蓋桌面版和行動版；prefers-reduced-motion關閉/縮短動畫。 - 只動畫
transform和opacity（不動畫width、top、margin→ 避免 reflow）。 - 在載入會改變頁面高度的字型/圖片後，呼叫
ScrollTrigger.refresh()。 - 沒有任何低於 0.6 秒的動畫；沒有
linear/back/bounce/elastic。
可移植性（Next.js 之外）
動畫系統和黃金法則在任何環境中都適用。對於純 HTML/CSS、WordPress/Divi 或 LearnWorlds：透過 CDN 使用 GSAP + ScrollTrigger + Lenis，維持相同的 duration/ease 令牌，並為類別/選擇器加上前綴，以避免在該平台中樣式洩漏。具體說明請見 references/01-setup.md 末尾。
技能檔案地圖
assets/CLAUDE.md— 專案聖經模板（複製到根目錄並調整）。assets/lib/lenis-provider.tsx— React/Next 的 Provider，包含規範的 Lenis↔GSAP 整合。assets/lib/motion.ts— 動畫令牌（持續時間、緩動函數、顯示輔助函數）。references/01-setup.md— 技術棧、安裝、整合、SSR/Next、可移植性。references/02-hero.md— 完整的電影級英雄區配方。references/03-scroll-camera.md— 固定、stagger、視差、scrub、水平捲動。references/04-mobile-a11y.md— matchMedia、reduced-motion、效能、行動端除錯。references/05-refinamento.md— 詳細的動畫系統與打磨檢查清單。