AutoZoom 操作示範影片
你正位於使用者的專案中。請讀取該功能的真實程式碼，將其畫面重建為 Remotion 專案中的 React 元件，並以 AutoZoom 錄製螢幕的方式進行拍攝：鏡頭會自動變焦對準每一個動作。以程式碼建立的畫面遠勝於螢幕截圖：真實的輸入框中會逐字輸入文字，行會滑入，按鈕會改變狀態，且一切在任意縮放層級下都保持銳利。
本技能包含的檔案：
scripts/setup.mjs用於建立 Remotion 專案並安裝（Remotion + React）。assets/remotion-template/是複製的範本：包含自動變焦鏡頭、視窗、游標、聚光燈、疊加層以及一個範例畫面與故事。只有src/story.tsx和src/screens/*會根據每個示範而變更。references/story-api.md記錄了每個故事欄位、畫面鉤子以及如何測量位置。在撰寫故事前請先閱讀此文件。references/style.md是 AutoZoom 的外觀樣式：框架、動態與疊加層。
工作流程
1. 確定故事
與使用者達成共識，用一句話說明觀眾應該學到什麼（例如「搜尋任意指標，然後一鍵分享」）。將時間控制在 6 到 15 秒 之間，並包含 2 到 4 個節拍。每個影片只傳達一個想法；如果需要展示兩個功能，請製作兩支影片。只有在要展示的功能不明確時才提問；否則直接選擇最令人印象深刻的流程。
2. 閱讀專案
找出示範要展示的內容：
- 路由、頁面或元件及其子元件；
- 設計 Token：Tailwind 設定、CSS 變數、主題檔案；
- 字型、圖示庫、Logo；
- 真實的範例資料：fixtures、種子資料、Storybook 故事、mocks、測試資料。
絕不能憑空創造不同的外觀。示範影片必須看起來像他們的產品。
3. 設定 Remotion
node <skill-dir>/scripts/setup.mjs demo # 建立 ./demo 並安裝
重新執行是安全的。將 demo/ 加入專案的工作區，或保留為獨立目錄。
4. 建立畫面（demo/src/screens/<Name>.tsx）
以故事視口（預設 1440 × 900，類似瀏覽器視窗）繪製畫面。選擇適合專案的路由方式：
- A. 匯入真實的元件（React 專案）。 品質最佳。適用於元件為呈現性（presentational）的情況。為它們提供靜態 props 與資料，並將其包裝在所需的任何 Provider（主題、路由、Query Client、i18n）中，並使用樁值（stub values）。絕對不要讓它們從網路請求資料或讀取驗證資訊。確保別名（alias）能正確解析並載入其樣式；請參閱
references/story-api.md›「使用專案自己的元件」。 - B. 重建它（任何技術棧：Svelte、Vue、Angular、原生，或具有大量執行時期依賴的 React）。 將頁面移植為 React，保留相同的結構、類別名稱或數值、色彩、圓角、間距、字型、圖示與文案，直接從原始碼讀取。只包含畫面上可見的內容。
無論採用哪種方式：
- 使用專案中的真實資料（名稱、數字、狀態），絕不使用 lorem ipsum。
- 為故事要對準的元素設定已知位置。佈局時應能明確說出它們的邊界，或透過除錯網格（步驟 6）進行測量。
- 讓畫面利用
src/lib/hooks.ts中的鉤子（useTyped、useAfter、useProgress、usePop、useCount）自行產生動畫。透過 props 將影格編號傳入故事，使時間軸集中在一個地方。src/screens/MockDashboard.tsx是一個實際範例。
5. 撰寫故事（demo/src/story.tsx）
首先以影格（fps 60）為單位，以註解方式寫出時間軸：
0–60 全景；游標移至搜尋框，點擊（58）
60–130 鏡頭變焦至搜尋框
140–260 查詢內容自動輸入；字幕 1
268 回車；結果更新
280–345 鏡頭拉回至結果
... 鏡頭 + 游標移動 → 點擊 → 結果 → 提示訊息；字幕 2
520–600 鏡頭平順拉回
然後填寫 camera、cursor、clicks、keys、captions、toasts 和 spotlights，所有數值均以畫面像素（screen px）為單位。關閉 rec：角落的疊加層在鏡頭變焦時會蓋在應用程式上方。欄位參考請見 references/story-api.md。
6. 檢查靜態畫面，然後渲染
cd demo
npx remotion still Demo out/f.png --frame=150 # 檢查關鍵影格（讀取 PNG 檔案）
npm run studio # 為使用者提供即時預覽
npm run render # → out/demo.mp4
在故事中設定 debug: true，可在畫面上繪製帶有標籤的 100px 網格，以便從靜態畫面讀取位置。渲染前請關閉除錯模式。檢查每個節拍的靜態畫面：變焦時主體完全在畫面內，游標尖端對準目標，文字清晰可讀，且疊加層不會遮蓋操作。
7. 交付
將 MP4 檔案路徑交給使用者，並展示一或兩個影格。可選擇透過 @remotion/player（請參閱 references/story-api.md）將即時組合嵌入使用者的網站。
動態規則（AutoZoom 風格）
- 自動變焦鏡頭： 要嘛是整個視窗（1×），要嘛是清晰的近景（1.6–2.2×），絕不能使用中間值：1.1–1.5× 的變焦只會裁切視窗，看起來很糟糕。對準重點進行變焦，保持，直接移動到下一個目標，最後回到 1×。移動耗時 60–100 影格；停留至少 50 影格。移動使用
ease: 'smooth'（預設值），只有快速到達時才使用'snap'。無動態模糊。 - 游標： 先到達，然後點擊（按下凹陷 + 波紋效果，在
clicks中的每個影格自動產生），然後結果在 2–6 影格後顯示。打字時，將游標稍微移開，以免遮住文字。 - 一個節拍的順序： 鏡頭開始移動 → 游標到達 → 點擊 → 狀態改變 → 提示訊息或按鍵顯示 → 字幕傳達意義。
- 字幕： 如同簡報者會說的內容，每行 3–6 個單詞，每個影片最多兩行。
- 疊加層（字幕、按鍵顯示、提示訊息、REC 標誌）保持在鏡頭之外：它們不會跟著變焦，也永遠不會遮蓋操作。
- 克制： 使用一個強調色，不撒彩紙、不旋轉、不彈跳文字。產品本身才是主角。
品質檢查清單
- 看起來像他們的產品：相同的字型、色彩、文案和資料。
- story.tsx 開頭有時間軸註解；影格編號集中在一個地方。
- 每個節拍都透過靜態畫面檢查過；變焦時或疊加層不會裁切或遮蓋重要內容。
- 游標精確落在目標上；點擊在結果出現之前。
- 文字在 1080p 下可讀；字幕簡短。
-
debug已關閉，且渲染無錯誤完成。