網站動畫：選擇與建置
此技能協助你從 30 個食譜中選擇並建置網站動畫。資料夾中的檔案：
- placements.md：8 個網站位置，以及每個位置適用的動畫。
- recipes.md：30 個動畫各自的完整建置規格。
步驟 1：詢問套用位置
當技能載入時，先用使用者的語言，並以編號清單提出這個問題。在獲得答案之前，不要開始撰寫程式碼。
"你希望動畫套用在網站的哪個位置？"
- 登陸頁面的英雄區（Hero）
- 捲動切換或螢幕轉場
- 卡片與功能網格
- 表單、輸入欄位與一次性驗證碼
- 按鈕、開關與進度指示器
- 導覽與選單
- 產品或應用程式展示（手機模型、輪播）
- 跟隨游標的全身角色或效果
如果使用者在請求中已提及位置，則跳至步驟 2，並說明已理解的位置。
步驟 2：詢問動畫類型
讀取 placements.md，僅顯示所選位置的選項，並以編號清單呈現。每個選項需包含：名稱、一句以使用者語言描述的視覺效果，以及複雜度等級。請使用者選擇一個數字，或描述兩個選項的組合。
如果使用者不確定，根據已知資訊（行業類型、目標受眾、願意維護的複雜度）推薦一個，並用一句話說明理由。
步驟 3：建置前的三個簡短問題
在一則訊息中詢問：
- 建置平台：純 HTML/CSS/JS、React、Next.js、Webflow、WordPress 或其他？
- 內容：標題、文字、圖片、品牌顏色、商標。若無，則使用範例內容並標記為範例。
- 網站是否必須在所有瀏覽器與行動裝置上運作？標記為「實驗性」的動畫依賴僅限 Chrome 的 API。
步驟 4：建置
- 在
recipes.md中開啟所選的食譜，閱讀完整規格。 - 根據規格與使用者的內容從頭實作。
- 選擇能達成效果的最簡單工具：優先使用 CSS，再來是 Canvas，最後才是 WebGL。僅在需要真實深度、光照或著色器時才使用 Three.js 或 R3F。
- 將食譜中的「調整按鈕」作為檔案頂端的變數，或透過小型面板（例如 lil-gui 或 Leva）暴露，以便無需修改程式碼即可調整。
- 對於標記為「僅限 Chrome」的食譜：建置降級方案，例如將 HTML 渲染為紋理或簡化的 CSS 版本。應在執行時期檢查支援度，而非根據使用者代理。
步驟 5：交付前檢查
逐項檢查並向使用者回報哪些已檢查、哪些未檢查：
- prefers-reduced-motion：在此設定下，動畫應停止或替換為靜態版本。
- 效能：目標在一般電腦上達到 60fps。當元件不可見時（IntersectionObserver）以及分頁隱藏時，應停止動畫循環。限制 devicePixelRatio 為 2。
- 行動裝置：使用觸控取代懸停效果，並在低效能裝置上提供較輕量或靜態版本。
- 無障礙性：文字應保持為真實 HTML，可被螢幕閱讀器與搜尋引擎存取。任何遮蔽內容的效果不應阻擋閱讀。
- 若未在瀏覽器中執行程式碼，應明確說明。