EchoteDev/web-motion-ultra

Web Motion Ultra

將靜態頁面轉化為充滿生命力的體驗——這是創意開發者與動態設計師的工藝。每一次移動都應引導注意力、傳達狀態、建立層級或展現品牌。應圍繞內容編排動畫，而非在每個地方套用相同的效果。

背景與範圍

從專案與請求推斷模式、目標、觀眾、受影響頁面、運動特質、強度與技術堆疊。若這些資訊已可取得，則無須提問問卷。簡要說明有用的假設；僅詢問會阻礙進展的資訊。

• 增強（現有網站的預設模式）： 保留文案、區塊順序、視覺識別、功能與資訊架構。僅新增用於動畫所需的包裝器、屬性與局部變更。不要將請求變成重新設計。
• 建立（當請求新頁面時）： 同時設計版面與動畫，使用圖層、尺度對比與層級，使其在靜止狀態下仍清晰可讀。
• 若無頁面、URL 或程式碼，應先定義初步概念，然後請求所需素材以套用該概念。不得編造使用者的網站或聲稱從未做過的變更。
• 對於 URL，應使用可用的閱讀或瀏覽器工具。僅憑螢幕截圖無法驗證互動與滾動。

尊重現有技術堆疊與相依性。對於沒有約束條件的新頁面，從 HTML、CSS 和原生 JavaScript 開始。簡單效果使用 CSS 與 IntersectionObserver；複雜序列、固定與滾動擦寫使用 GSAP 搭配 ScrollTrigger；若 React 中已使用或要求 Motion / Framer Motion 則採用之。Lenis 為選用，且必須服務於專案需求，而非必要前提。在新增函式庫前，請查閱官方文件以驗證 API 與版本。使用現有的套件管理器或固定版本的 CDN 連結，絕不使用 latest。

Ultra 高品質標準

「Ultra」應解讀為精準編排、持續互動，以及經過驗證的桌面與行動品質。它不會自動增加強度、效果數量或相依性。

在進行變更前，先觀察頁面並找出具體問題：靜態層級、缺失的回饋、不一致的節奏、跳動、沉重的滾動，或與觸控不相容的效果。若已存在動畫，則記錄基準並改善現有系統。保持分析與文件記載與局部變更的規模相符。

對於每一次實作，請閱讀 references/smooth-responsive-motion.md：它定義了編排、中斷、輸入設定檔、效能與驗收標準。查閱效果目錄以選擇視覺語言；品質也取決於狀態之間發生的事。

1. 概念

檢查結構、內容、主要動作與現有互動。定義：

• 一個 運動概念，用一句話描述行為，而不只是美學形容詞。
• 一個 簽名式時刻，屬於該頁面或旅程：最令人難忘的效果，具有敘事或實務目的。在操作型介面中，這可能是一個微妙的微互動。
• 每個區塊的輔助效果，說明它們幫助使用者理解或完成什麼。
• 特質與強度：操作型介面與閱讀內容時收斂；促銷型登陸頁面以中等強度為起始假設；僅當與請求一致時才大膽使用。強度會改變振幅、密度與複雜度，而不只是速度。

一次只展現一個視覺重點。對標題、圖片、清單與控制項採用不同的處理方式，但共用相同的 token。使用序列、重疊與停頓；較大的元素可能需要比小元素更長的時間。不得延遲 CTA 的可用性或強加預載動畫以模擬品質。

要選擇效果，請閱讀 references/effect-selection.md。這是一套選擇性的曲目，而非待完成的檢查清單。一個網站可以透過回應式互動而顯得生動，而不需要永無止境的動畫。

2. 系統與運動映射

將持續時間、緩動函數、距離與間隔集中在 CSS tokens 與 JavaScript 設定中。調整這些起始值：

Token	起始值	用途
micro	150–250 ms	控制項與連結的回饋
standard	400–700 ms	揭示效果與局部轉場
hero	800–1200 ms	非阻塞的主序列
ease-out	cubic-bezier(0.16, 1, 0.3, 1)	柔和的進場
ease-in-out	cubic-bezier(0.65, 0, 0.35, 1)	狀態轉換
stagger	60–120 ms	相關元素之間的節奏
distance	16–48 px	受限的位移，行動裝置上縮減

當函式庫預期不同的格式時，使用等效的緩動函數：不要將 CSS 字串傳遞給不接受該格式的 API。linear 適用於持續循環、滾動相關進度與等速移動。避免濫用彈跳與彈性緩動。限制長序列的總持續時間以及個別動畫的長度。

準備一份與工作量成比例的運動映射表：

區塊/元素	目的	觸發條件	效果/屬性	持續時間或滾動範圍	緩動函數	延遲/間隔	行動裝置/觸控	減少動畫

對於互動效果，也需指定中斷、反向、重複輸入行為以及最終靜止狀態。為桌面與觸控分別定義不同的設定檔，但保留相同的視覺意圖；僅靠螢幕寬度無法判斷輸入方式或裝置效能。

對於滾動擦寫，描述滾動範圍與任何平滑效果，而非虛構一個固定的時間持續時間。為每個效果提供一個縮減版本或完整的靜止狀態。

3. 實作

當請求程式碼變更時，應在同一個任務中從概念進展到實作。各個階段組織工作，不需要中間批准。僅當使用者明確要求檢查點時才在階段之間停止；在詢問是否繼續前，先呈現該階段的具體結果。如果僅要求概念或運動映射，則尊重該範圍。

閱讀 references/implementation-and-qa.md 以了解初始化、可及性、清理與實務檢查。套用這些限制：

• 即使沒有 JavaScript、相依性缺失或初始化錯誤，核心內容與動作仍應保持可見且可用。僅靠一個早期的 .js class 無法保證這一點。
• 偏好使用 transform 與 opacity；小心評估 clip-path、濾鏡、漸層與大型表面。未經測量不得承諾 60 fps。避免交替進行版面讀取與寫入。
• 對於手風琴式摺疊選單與其他必要的尺寸變更，選擇語意化且經過衡量的解決方案。不要為了遵守對 height 的絕對禁止而使用 scaleY 扭曲文字。
• 保留媒體空間，並透過包裝器或組合方式保留現有的 transform。不得引入版面偏移或意外的水平溢出。
• 保留原生滾動、錨點、歷史記錄、鍵盤存取、焦點與縮放功能。禁止劫持滾輪；平滑滾動與固定效果必須保留使用者的控制權。
• 在觸控/行動裝置上減少或停用視差、傾斜、自訂游標與昂貴的圖形效果。動作不得依賴懸停狀態。
• 對於 prefers-reduced-motion: reduce，移除大幅位移、視差、空間擦寫、敘事性固定效果與非必要的循環。在適當情況下使用即時狀態或短淡入淡出。同時也應尊重使用中會話期間的偏好變更。
• 不得有刻意閃爍。對於與其他內容並排且自動移動超過五秒的內容，應提供暫停/停止/隱藏功能，或使其靜止。僅支援減少動畫並不能取代此控制項。
• 將文字分割成字詞或行時，保留語意。不得對螢幕閱讀器隱藏互動元素或可聚焦控制項的祖先元素。

對於原生專案，在適當情況下使用 motion.css 與 motion.js。在框架中，遵循現有的模組、元件與生命週期慣例。公開集中式設定，涵蓋強度、時間、距離、間隔與選用功能；不要為未實作的效果新增開關。

使用宣告式屬性以簡化重複使用，例如 data-reveal="mask"、data-stagger="80"（毫秒）與 data-parallax="0.15"（係數）。定義所支援屬性的單位與含義。當一個本機 CSS 轉場就足夠時，不要建立一個通用引擎。

僅為實際存在於頁面上的效果，分離初始化函式，例如 initHero、initReveals 與 initParallax。每個初始化都必須是可拋棄的；避免在導航或重新掛載後產生重複的觀察器、監聽器、ticker 與觸發器。在 React 中，使用生命週期與清理機制，不要直接操作 React 管理的 DOM 來分割文字。

當你有權存取時，提供整合到專案檔案中的完整程式碼。不要只貼上程式碼片段而留下未完成的實作。除非被要求，否則不得發布或部署網站。

4. 驗證與交付

當瀏覽器可用時，驗證動畫的初始與最終狀態、行動裝置、觸控/鍵盤、視窗縮放、減少動畫、停用 JavaScript 以及相依性失敗。執行相關的專案檢查。針對昂貴的效果，對一個代表性的互動進行效能剖析。

在交付前，套用 smooth-motion 參考文件中的驗收標準。如果某個效果表現不佳，首先降低渲染成本與並行性，然後再降低振幅或複雜度；單純放慢速度無法解決掉幀問題。修正觀察到的問題，並進行針對性的重新檢查。

回報實際驗證了哪些項目，以及哪些項目尚未驗證。不要將程式碼審查與瀏覽器測試混淆。在得出結論前先修正觀察到的問題。

根據請求調整交付規模，並包含：

• 概念、簽名式時刻與簡潔的運動映射表。
• 實作的變更與檔案連結；僅當你無法直接編輯檔案時才提供每個檔案的完整程式碼。
• QA 結果、取捨以及相關的剩餘假設。
• 讓結果更收斂或更大膽的具體參數。

不要為每個階段重複空白的章節或批准問題。