site-motion 是做什麼的？
標記為 Pro 的場景，或在此筆記中提及但不在
scenes/目錄中的場景，均為 site-motion Pro 場景。請根據筆記的說明來了解它們；從此處現有的場景開始建構（使用site-motion list）。
一個場景是 時間的純函數。render(t) 對於相同的 t 始終繪製相同的畫面，無論先前發生過什麼。正是這條規則使得同一個檔案既能在網站上即時播放，又能渲染出幀精確的影片：匯出器只需尋找每個幀時間並進行螢幕截圖即可。
倉庫根目錄：包含此檔案的資料夾（使用 git clone https://github.com/Shivraj97/site-motion ~/.claude/skills/site-motion 安裝，或將克隆的倉庫連結到該處）。需要 Node 22+、Chrome、ffmpeg。無須 npm 安裝。從任何專案中，使用其完整路徑執行 CLI；建構和渲染的產出會放置於該專案的 out/ 目錄中，而 --tokens 和 --content 參數則接受相對於專案的路径：
SM=~/.claude/skills/site-motion/bin/site-motion.mjs
node $SM init card-story --tokens ledger # 寫入 ./brand.json（來自預設集）和 ./card-story.json 以供編輯
node $SM make card-story --tokens ./brand.json --content ./card-story.json --out public/motion/story.html
若要將場景放入專案自己的原始碼中以便團隊編輯，請使用 add 指令替代 make。它會將 scene.js、scene.css、content.json 和 tokens.json 複製到 public/motion/<scene>/（當沒有 public/ 目錄時則為 motion/<scene>/），將播放器和第三方庫複製到 runtime/，並寫入 <scene>.html，一個單一檔案嵌入。複製的資料夾是一個有效的場景，可被 build、render 和 make 使用：
node $SM add ledger-stamp --tokens ./brand.json --content ./ledger.json # → public/motion/ledger-stamp/ + ledger-stamp.html
node $SM make public/motion/ledger-stamp --tokens public/motion/ledger-stamp/tokens.json --formats png,sheet
在倉庫內部，可以使用簡寫形式：
node bin/site-motion.mjs list # 場景和權杖預設集
node bin/site-motion.mjs make iso-blocks --tokens mint # 建構並渲染 mp4、webp、海報
node bin/site-motion.mjs make card-story --tokens ./brand.json --content ./my-story.json --formats mp4,webm,webp,gif,png,sheet
node bin/site-motion.mjs build window-stack --tokens night --out public/hero.html # 僅即時嵌入
node bin/site-motion.mjs render out/hero.html --formats mp4 --scale 2 --range loop # 匯出現有的建構
輸出會放置於 out/<content>-<tokens>/。--range loop 僅匯出無縫循環（這是 GIF 和 WebP 的預設值）；full 則是介紹加上一個循環（這是 MP4 和 WebM 的預設值）。sheet 會寫入一個 4×3 的聯繫圖表（contact sheet）：請務必製作一個並閱讀它。
工作流程
一個完整的網站（數個區塊或頁面）應從計畫開始，而不是從一個場景開始。 在專案中執行 node $SM plan：
- 搭配
--brief brief.md：當您知道有哪些區塊時。這是最佳輸入。請根據網站的真實文案來撰寫簡報：# Acme：產品功能的一句話描述 ## home - hero：英雄區塊標題 - feature：每個功能區塊的標題及其下一行說明 ## pricing - hero：… - 或搭配
--url https://their-site.com[,https://their-site.com/pricing]：讀取即時頁面自身的標題； - 或搭配
--pages home,features,pricing --about "…"：當沒有其他資訊時（通用選擇，請說明這是通用選擇）。
它會將每個區塊映射到一個場景，每個場景使用一次，且所有場景風格一致。此風格將以首頁英雄區塊的風格為準，並鎖定於 site-motion.json 中。它會繪製 site-motion-plan.png：以該品牌的風格和視覺外觀呈現每個區塊的場景畫面，並在頂部顯示評分的結論。在 plan apply 之前，請向使用者展示圖表並獲得批准。
- 標記為
?的選項表示沒有強烈的匹配。請閱讀其備註（例如「ledger-stamp 更合適，但已被用於 home.hero」），然後進行交換（plan swap <slot> <scene>）、重複使用更好的場景，或告知使用者該函式庫尚無適用於該故事的場景。 - 未經說明，切勿對薄弱匹配的選項執行
apply。
plan apply 會加入每個場景，並列印每個區塊的嵌入代碼。然後在每個場景的 content.json 中撰寫其文案，執行 sync，最後以 score --project 完成。
對於單一場景，請遵循以下步驟。
- 首先取得設計系統。 權杖（tokens）是顏色和字體的唯一來源。請按以下順序尋找它們：專案的 tokens/theme 檔案（CSS 變數、Tailwind 設定、
tokens.json），然後是即時網站（測量計算後的樣式），最後是詢問。將其寫入tokens/<brand>.json（形狀如下）。一旦調色板存在，切勿發明新的顏色；請使用權杖中的h.mix(a, b, p)導出色調。 - 選擇能講述產品故事的典型場景（archetype），或編寫一個新的場景：
場景 它講述的故事 渲染器 iso-blocks基礎設施、平台、「許多部分協同運作」：帶有即時資料的方塊排列在網格地板上 SVG card-story一個消除工作的工作流程：一個功能列表驅動產品卡片經歷各個狀態 DOM window-stack「在你工作的地方工作」：應用程式視窗疊加在 Canvas 背景上，一個AI代理正在執行步驟 Canvas + DOM live-roomPro多人協作：命名游標疊加在應用程式視窗上，包含提案、投票通過、變更部署、活動跑馬燈 Canvas + DOM leaderboard貢獻與排名：貢獻落在行上，點數向上計數，行重新排序 DOM bloom-flow自動化：事件流經工作流程圖表，每一步驟綻放成生成式花朵 Canvas + SVG signal-field雜亂 → 結構化：雜亂的訊號行經過一個閘門，變成整齊的車道 p5.js drop-pile多 → 一：工作項目透過真實物理效果落入一個托盤，計數器進行統計 Matter.js（烘焙） galton-router路由、審批、A/B 測試：支付透過釘板落下；規則切換開關，流程移動到最佳容器 SVG（種子隨機漫步） receipt-printer雜亂 → 結構化：文件送入一個插槽，收據列印出每個提取的欄位及其信心度 DOM + SVG score-sheet協調、多代理：運行被寫成樂譜，各音軌在每個代理工作時振動 SVG css3d-stack架構、層次：真實的 HTML 盒子在 CSS 3D 中分離，同時請求穿過 CSS 3D loom多 → 一、整合：每個工具都是一條經線，編織成一塊斜紋布料，纏繞在產品的捲軸上 Canvas 2D domino-run自動化、觸發器：一個球觸發連鎖反應的多米諾骨牌，這些骨牌按步驟分組，每一步在波動到達時亮起 Matter.js（烘焙） weather-board可靠性、故障轉移：風暴（著色器雲、雨、閃電）在狀態地圖的某一區域上空形成，流量重新路由，最終以零失敗請求平息 WebGL 著色器 + DOM ledger-stamp審批、合規、信任：支付在索引帶上行進，經過政策掃描器、「APPROVED」印章機和簽名蓋章機，進入審計軌跡；超過限額的支付會被標記為「HELD」並等待第二個審批者 SVG + DOM grain-tally指標、規模：數千個顆粒（每個顆粒代表一批固定的事件）像塵埃環一樣起伏，傾注到總數的數字中，然後按來源分類到一個條形中，並顯示精確計數；該數字由其資料構建而成，而非向上計數 Canvas 2D（粒子，純 t 函數） lens-of-order雜亂 → 結構化、分類、具備視覺能力的AI：一個 1 位元抖動的場域，充滿漂移的色塊（尚未被理解）；一個放大鏡以類別顏色填充每個色塊，描邊並以信心度標記，留下逐漸淡出的彩色軌跡 Canvas 2D（逐細胞場域，Bayer 抖動） water-slide-funnel轉換漏斗：騎手滑下每個階段的坡道；每個坡道底部的池塘捕捉該階段的流失者 SVG gold-panPro即時搜尋：每次按鍵攪動淘金盤，直到剩下三個有價格的金塊 Canvas 2D museum-heatmapPro產品分析：訪客腳印加熱人們停留的功能周圍的地板；排名來自熱度 Canvas 2D cell-division資料庫分支：主分支分裂成分支，一個被丟棄，一個帶著變更合併回來 Canvas 2D（Meta Balls） scratch-offPro預測：在航空公司看板追上之前，刮去覆蓋層顯示真實的起飛時間 Canvas 2D sieve-trayPro早期偵測：標記穿過細網；少數被卡住的被提出來並標記 Matter.js（烘焙） rube-goldbergPro之前 / 之後：一個接收彈珠卡在五個舊裝置中，然後在第二個裝置中掉下一個溜槽 SVG language-balloonsPro本地化：八種文字的對話氣泡向上浮動，組裝出每個語言環境的句子，包含 RTL Matter.js（烘焙） balloon-deployPro部署：每個構建步驟為氣球充氣；達到 100% 時釋放升空 SVG pufferfishPro自動縮放：河豚膨脹以匹配每個流量波，而固定容量的魚則被拋棄 SVG gear-tiersPro定價：計劃被繪製為露營裝備，從帳篷到基地營，附帶月/年切換鈕 SVG permission-chessboardPro角色與權限：每個角色棋子落在棋盤上，僅照亮其允許使用的方格 SVG tree-rings年度回顧：每年一個年輪，寬度與該年的忙碌程度成正比，附帶重要事件的標記 SVG parchment-changelog更新日誌：捲軸一次展開一個版本，每個版本在釋出時以墨水書寫 SVG + DOM moving-boxes遷移：手推車將每個舊工具箱子搬運到新建築中，無一遺失 SVG + DOM privacy-pebblesProPII 遮蔽：刮刀將每個個人資訊變成相同的鵝卵石；句子仍然可讀 SVG + DOM ant-trailPro自動分類：螞蟻將每次刷卡、備忘錄和審批搬運到正確的帳本位置 Canvas 2D sunrise-payrollPro全球薪資：日出跨越八個時區，在每個城市自己的早上 9 點支付 SVG whiteoutPro平靜：繁忙的儀表板消散在霧中，只留下最重要的數字 WebGL 著色器 + DOM ink-floodPro主題設定、白標：一個油漆色卡將整個產品淹沒在全新的配色方案中 SVG integration-deckPro整合：每個工具都是一個等角巨集鍵盤上的一個按鍵；工作流程像和弦一樣播放，同時運行日誌輸入每個步驟 Three.js margin-railsPro來源追溯：備忘錄自行書寫，同時從過去檔案中繼承的段落沿著命名其來源的軌道滑入 SVG + DOM pigeonhole-wall記憶：文件歸檔到標籤格子中，請求提取所需的三個來源 SVG + DOM redline-frontPro合約審查：審查前線掃過文件，並將其返回為一份最終的修訂版本，附帶驗證過的權限 SVG + DOM step-rail運作方式、入門引導：權杖行經編號的步驟；每個卡片展開顯示其步驟產生的內容，最後一個步驟呈現結果 SVG + DOM pipeline-board工作流程、管道：卡片在看板上一列一列地前進，同時計數和總計跟隨它們 DOM account-health留存、客戶成功：健康度表格回放該月的活動；一個帳戶滑落至有風險狀態，一個應變方案啟動並使其恢復 SVG split-wipe之前 / 之後、合併：一個分隔線掃過分散的手動工作，每個碎片卡入一個統一的產品表面 DOM roadmap-rail路線圖、里程碑：一個「今天」標記沿著時間軸移動；已發布的里程碑被填入，關鍵發布點展開成一張卡片 SVG trust-rings安全性、合規：請求穿過資料周圍的同心控制環；未經授權的請求被攔截並記錄 SVG balance-scale定價、品質 vs 成本：三個托盤天平，每個傾斜由分數計算得出；我們的天平傾向於品質 SVG crate-discrepancy對帳：托盤從板條箱中提起，並核對裝箱單；短少的托盤浮起並附帶備註 SVG + DOM press-qa測試、CI：建構版本從壓機中產出；一個機械臂將測試失敗的那個彈入滑槽，重新運行時通過 SVG radar-sweep可觀測性：每個正在運行的任務都是雷達螢幕上的一個光點；游標伸入並暫停失敗的任務 Canvas 2D + DOM agent-checkout產品 UI 示範、代理支付：一個購買請求，一個遮罩虛擬卡自動填寫，限額指示器依金額移動，收據加入列表 DOM + ui-kit click-to-done產品 UI 示範、任何單一操作功能（邀請、發送、批准、發布）：一個瀏覽器框架中的真實螢幕，游標輸入、選擇和點擊，相機移動並在結果處拉回 DOM + ui-kit dashboard-push產品 UI 示範、分析和報表：主體數字隨圖表繪製而構建，游標刷過提示框，相機推進到關鍵時刻，範圍切換改變每個序列 DOM + SVG + ui-kit phone-stack產品 UI 示範、行動裝置和通知：警報帶有訊號環落在鎖定螢幕上，點擊開啟最新的到應用程式畫面，滑動主畫面清除它 DOM + ui-kit shot-demo產品 UI 示範（從螢幕截圖）：客戶自己的螢幕截圖在框架中；游標在其真實欄位中輸入並點擊真實按鈕，數值在品牌頁面上改變，一個聚光燈和標註落在結果上 DOM + 螢幕截圖 + ui-kit integration-deck是 3D 標準：一個觸覺物件，一個物理動作，平面卡通風格，墨水輪廓，真正的等角相機，以及使用品牌字體的標籤。其他 Three.js 物件場景（一個軌道中心、一個分類牆、一個擠出標誌、一個 glTF 展示）在被重新設計之前，不屬於公開集合；3D 工具（vendor/three-full.min.js、ve）
…
[因翻譯而截斷]