Web Motion 動態網頁製作 是做什麼的？
目標
把需要「變化過程」才能成立的內容做成可編輯網頁動畫、動態圖解、GIF、短動畫或解釋型 B-roll。預設保留一份網頁真源和一條可確定定位的時間線，再從它派生用戶點名的媒體。
本 Skill 不負責普通靜態卡、已有實拍素材剪輯、音頻節目或主題研究。倉庫內資源路徑相對於 Visual Multimedia 套件根目錄，只按當前路線讀取。
工作方式
確認內容真源、受眾、輸出比例、播放方式和真實時長來源。觀眾可見的標題、標籤、字幕或旁白草稿尚未明確確認時，先交給 $clean-copy 檢查並等待它自己的確認；本 Skill 不再維護 AI 句式清單。
正式實現前提交一次可確認方案：準確可見文案、場景或狀態順序、運動載體、開始—變化—結果、畫布規格、字體與配色方向、需要的真實素材和來源，然後停止。只有用戶明確跳過確認才直接實現。運動必須表達推進、因果、比較、反饋或狀態變化；只換標題、整頁淡入或輪流出現卡片不能冒充動態圖解。
將確認內容拆語義片段，每段記錄新增資訊、聲音範圍、畫面職責和時間依據。使用一份 editable-media v6 網頁真源，讓 window.editableMedia 保存結構化狀態，讓 window.__hf.duration/seek(seconds) 提供確定性時間；手動、自動和混合播放都讀取同一語義時間線，不建立第二套時鐘。
根據任務只選擇必要路線：文字動效讀取文字動效庫；技術機制變化讀取語義圖形運動規則；解釋型 B-roll 使用已註冊活動模板；只有用戶明確選擇 HyperFrames 時才建立獨立渲染副本。需要與實拍或聲音裝配成完整影片時，把網頁片段和真實時間邊界交給 $video-production，不要在本 Skill 中接管現有素材剪輯。
實現後查看開始、所有關鍵變化與結果狀態，再完整播放。檢查隨機定位一致、結果不會被局部循環重置、文字始終可讀、鏡頭和物件不爭奪同一 transform、GIF 或影片解碼幀與瀏覽器源幀一致。導出失敗時保留網頁真源並報告具體環節，不靜默換路線。
資源
../../references/web-visual-production.md：網頁真源、場景、播放與本地導出。../../references/semantic-graphic-motion-production.md：物件關係與狀態變化怎樣成為運動。../../references/text-motion-production.md、../../scripts/text-motion-library.mjs、../../assets/text-motion-library/text-motion-runtime.js、../../assets/text-motion-library/text-motion-binding.js：確定性文字動效路線。../../references/explanatory-broll-production.md：解釋型 B-roll 的模板選擇、真實時間投影和透明輸出。../../references/technical-diagram-production.md：技術圖解與穩定全貌動畫。../../references/hyperframes-rendering.md：只在用戶明確選擇 HyperFrames 時讀取。../../scripts/validate-editable-media.mjs與../../scripts/render-web-media-local.mjs：結構校驗和本地正式導出。
輸出與完成
交付網頁真源、當前時間線、關鍵狀態檢查圖、用戶點名的 GIF/影片/透明覆蓋層，以及瀏覽器源幀與最終檔案的核對結果。沒有要求時不額外製作靜態卡、完整剪輯影片或其它比例。