電影級網站
將高階網站動畫視為一個創造性開發系統，而非動畫片段的集合。
將模糊的「讓它更有電影感」這類需求轉化為：
- 藝術方向
- 素材策略
- 運動語言
- 滾輪編排
- 渲染與後處理計畫
- 效能與可近用性預算
- 實作
- 審查循環
工作流程
- 檢查現有應用程式棧、路由模型、渲染邊界與樣式系統。
- 識別專案是基於 DOM 純靜態、Motion、GSAP、R3F/WebGL、Spline、Rive/Lottie 還是混合型。
- 在新增動畫行為前，先建立或更新共享的運動令牌。
- 除非使用者明確要求快速實作，否則擬定藝術方向摘要。
- 選擇能利用現有素材達成概念的最小管線。
- 使用精確的編排：滾輪距離、固定長度、scrub 值、標籤、交錯值、相機位置、材質值、緩動函數與彈簧常數。
- 在精修前先進行檢測，使用標記、效能覆蓋層、可調常數、螢幕截圖或預算檢查。
- 為每個旗艦動畫提供減少動作與低功耗備案。
- 在宣告工作完成前，驗證桌面、行動裝置與減少動作的行為。
決策矩陣
- 使用 CSS 處理微小的 hover、focus 以及 opacity/transform 效果。
- 使用 Motion for React 處理狀態驅動的 UI、佈局過渡、共享元素、手勢與微互動。
- 使用 GSAP ScrollTrigger 處理固定故事、長時間軸與精確的滾輪編排。
- 當滾輪感受與 WebGL/DOM 同步是體驗的一部分時，使用 Lenis。
- 當英雄區域是真實的 3D 場景或著色器組合時，使用 R3F/drei。
- 當設計師擁有的互動式 3D 場景是事實來源時，使用 Spline。
- 使用 Rive 處理互動式向量動畫與狀態機。
- 當即時 WebGL 會超出效能預算時，使用影片、序列圖片或靜態媒體。
品質標準
若結果出現以下情況，則為不可接受：
- 到處都使用預設緩動。
- 未經選擇就對整個場景套用全域 bloom。
- 在 transform/opacity 可行時，動畫化 layout 屬性。
- 未經檢查或壓縮建議就載入一個龐大的 GLB 檔案。
- 沒有減少動作的備用方案。
- 依賴一個巨大的客戶端元件，且無延遲載入。
- 僅在開發者機器上看起來令人印象深刻。
運動令牌
在實作之前，建立一個共享的運動系統，包含：
- 緩動函數
- 彈簧
- 持續時間
- 交錯
- 滾輪 scrub 值
- 視差比率
- 減少動作替代方案
使用 examples/recipes/motion-tokens.ts 作為起點。
參考資料（按需載入）
- 藝術方向與需求搜集：
references/creative-direction.md - 不抄襲知名網站的參考分析：
references/reference-analysis.md - 緩動、彈簧、質量與編排：
references/motion-language.md - GSAP + Lenis 滾輪系統：
references/scroll-choreography.md - R3F 場景架構：
references/r3f-webgl-scenes.md - Bloom、景深、色差、暗角、著色器與色調映射：
references/postprocessing-shaders.md - Blender、Spline、Rive 與 glTF 交接：
references/asset-pipeline.md - 技術棧選擇：
references/stack-decision-matrix.md - 效能預算與行動裝置備案：
references/performance-budgets.md - 減少動作與可近用性：
references/accessibility-reduced-motion.md - 最終審查：
references/qa-rubric.md
輸出需求
實作時，請回報：
- 修改的檔案
- 新增或重複使用的運動令牌
- 包含數字的編排摘要
- 素材假設
- 效能風險與緩解措施
- 減少動作行為
- 如何執行與驗證