/minara-usecase-video — Minara 使用案例教學影片
奠基於案例 1（行動 App：提出一個問題 → BTC 策略 → 一鍵執行）與案例 3（桌面版 Strategy Studio：一句話 → Choice Boxes → 回測 → 優化 → 部署上線）的製作經驗，時間為 2026-10。
桌面版參考：assets/pc-monitor-frame.html 與 assets/helpers-reference.js（輔助函式可直接複製）。
此技能與 minara-video 的差異（請先閱讀此節）
| minara-video（行銷示範） | minara-usecase-video（此技能） | |
|---|---|---|
| UI | 不複製產品；最小化重新設計，使用大字型 | 忠實還原：遵循前端程式碼的元件、尺寸、顏色與文案 |
| 文案 | 自行撰寫行銷文案 | 按鈕/標題/提示使用產品原始文字逐字（含在地化語言）；照樣複製語法錯誤 |
| 交互路徑 | 可剪輯或濃縮 | 完整真實路徑：每個點擊、彈窗、核取方塊都必須出現，且順序與程式碼一致 |
| 攝影機 | 豐富的鏡頭運動 | 僅在點擊/打字時明顯推近並跟隨游標；否則保持靜止；清晰度優先 |
| 螢幕文字 | 無註解文字 | 畫面內無字幕；僅開頭 3 秒的標題卡為例外；文字覆蓋為獨立版本（另存於其他專案資料夾） |
| 結構 | 多個場景分別渲染 | 單一的連續組合（類似螢幕錄影） |
繼承自 minara-video 的嚴格規則：Geist 字型、簽名緩動 minaraSnap = cubic-bezier(0.95,0.03,0,0.98)、過渡時間 ≤0.5 秒、無 Math.random() / repeat:-1、時間軸設為 paused:true 並註冊到 window.__timelines、對於最大回撤超過 20% 的策略需先詢問操作者，以及測試頁面需具有可拖曳的時間軸。啟動時，首先執行 Skill(hyperframes) 以載入組合規則。
主題與示範素材（由操作者設定，2026-10-15）
- 股票策略優先：使用案例預設以股票 / TradFi 工具作為示範（例如 TradFi 30、個別美股、指數）。策略名稱、資產池、持倉與報價條應優先使用股票。
- 加密貨幣為次要：主要貨幣如 BTC 和 ETH 可出現，但不可為主。當影片同時包含股票與加密貨幣時，將股票置於前面並給予更多時間。
- 無迷因幣：除非操作者明確要求，否則不得在畫面、資產池、報價條、AI 回答或範例提示中出現迷因幣（DOGE、PEPE、WIF、BONK 等）。若產品預設資料包含它們，請替換。
- 在撰寫腳本與分鏡腳本時依據此規則選取資產。當產品素材中的範例不符合時，先替換為股票工具，再重建，並在腳本中標註替換。
真實來源（依優先順序）
- 前端程式碼（先拉取最新版本再查看；在腳本的「基準」章節中記錄提交日期）
- 網頁端：產品網頁前端倉庫（先執行
git pull） - 行動端：產品行動應用程式原始碼（
apps/mobile/src）- 文案：
locales/en.json（中文版本在對應的 zh 檔案中） - 顏色/間距：
theme/colors.light.ts、theme/tokens.ts - 元件：
ui/、features/<module>/（例如features/strategy/strategy-card、run-strategy、running-detail、features/agent/composer）
- 文案：
- 網頁端：產品網頁前端倉庫（先執行
- 操作者提供的螢幕錄影/截圖（位於
use case/素材資料夾）：用於佈局、層次結構與真實視覺效果。⚠️ 這些素材是 UI 參考，而非內容參考 —「忽略任何 Agent 說了什麼」；我們自行設計回答內容。 - 腳本 md：鏡頭分解、台詞、文字覆蓋。
若影片需要展示但程式碼尚未支援的交互（例如案例 1 聊天中可點擊的策略卡片），則可自行建造，但須清楚告知操作者這是目前程式碼尚未支援的規劃中交互，並從最接近的既有元件重建（案例 1 遵循 MarketplaceStrategyCard；點擊執行後，仍使用與市集相同的執行路徑）。
工作流程
1. 檢查腳本
- 逐一對照最新程式碼檢查每個鏡頭：按鈕名稱、頁面順序、必要步驟（例如風險揭露核取方塊、回測必須通過才能部署）、門檻數值。
- 編輯腳本時，操作者通常說「直接覆蓋原始檔案」；若只需提案則說「先給我提案，不要編輯腳本」— 請區分這兩種情況。
- 當一個 md 包含多個案例時，依需要拆分為單一案例檔案。
2. 從交互路徑反向推導 → 分鏡腳本
- 將程式碼中的真實路徑列出為表格：每個畫面的標題、元件、點擊目標與下一個畫面。範例（行動版，執行策略）：
Run → Select Wallet → Next → Configuration (Risk Control drawdown cap / auto-update / check risk disclosure) → Run → success page Running (View Details / Notify me) → Running Strategy Details → back → Strategy tab Running - 若有時間軸，直接前往
storyboard.html（模板assets/storyboard-template.html），然後製作逐秒排程；待操作者確認後才撰寫程式碼。
3. 規格
| 項目 | 行動應用程式 | 桌面版 |
|---|---|---|
| 畫布 | Composition 1080×1920，輸出 1440×2560 / 60fps | Composition 1920×1080，輸出 2560×1440 / 60fps |
| UI | 390pt 寬的 App 畫面，縮放至畫框的 90%，四周留邊，圓角 + 1px 邊框 | 1440×810 的網頁置於電腦顯示器內（深色邊框 + 底座，縮放 1.15），字型大小比產品原始尺寸大 10–15% |
| 主題/語言 | 由操作者設定；預設英文 + App 預設淺色主題 | 同左 |
| 示範資料 | 3–4 位數盈虧、回撤 <20%、標示為示範 | 同左 |
| 開場 | 0–3s 標題卡，然後逐步解說 | 同左 |
行動版座標系統：K = 1080*0.9/390，#app 置於 left:54px; top:96px，transform: scale(K)。所有元素 CSS 使用 App 內 pt 座標，依據程式碼中的尺寸重建。
桌面版座標系統：K = 1.15，OX = 132，OY = 38（畫面左上角在畫框中的 px 位置），1440×810 pt。佈局：左側欄 264 / 中間欄 766 / 右側助手 410，底部報價條 26。
桌面版必須使用電腦顯示器（由操作者設定，2026-10-15）：產品 UI 不再填滿整個畫框，而是置於電腦顯示器的畫面內，顯示器邊框與底座位於其後。直接使用 assets/pc-monitor-frame.html：
- 結構：
#cam>#stand-neck+#stand-base+#monitor>#screen>#app。顯示器外框 1684×959.5，位於 left 118 / top 24，14px 邊框，26px 圓角；畫面 1656×931.5，12px 圓角；底座居中置於顯示器下方。背景保留深色徑向漸層。 - 顯示器與底座均在
#cam內，因此推近時會隨 UI 一起放大；游標與點擊漣漪也在#cam內，定位使用OX + x*K、OY + y*K。camTo公式不變；僅需更換三個值K / OX / OY。 - UI 約比填滿畫框時小 14%（1.333 → 1.15），因此在廣角鏡頭中文字較小；點擊與打字時的推近可補償。若操作者認為廣角鏡頭文字過小，依字型規格將所有尺寸調高一級；不要移除顯示器。
- 開場標題卡淡出後，整個顯示器（含底座）從 1.04 倍淡入。
- 行動版不使用顯示器；維持目前的 90% 畫面搭配圓角與邊框。
字型大小規格（桌面版；操作者，2026-10-15：「讓整個 UI 的字型稍微大一些，以便用戶在手機上閱讀」） — 最終影片將在手機上觀看，因此這些大小為最小值：
| 元件 | pt |
|---|---|
| 頁面標題（策略名稱） | 21 |
| 側欄導航/分頁/工具列/按鈕/子分頁 | 16–16.5 |
| 助手主體/用戶對話泡泡/Choice Box 選項描述 | 15 / 15 / 14 |
| Choice Box 問題/選項名稱 | 17.5 / 16 |
| 指標卡標籤/數值 | 14 / 22 |
| 表格/程式碼 | 15 / 14.5（行高 24） |
| 彈窗標題/欄位標籤/輸入框、晶片、按鈕 | 20 / 14.5 / 15.5–16 |
若放大後文字無法容納，可移除次要小文字（例如指標卡中的「1,264 Trades」與「684W 580L」）；不要縮小字型。在桌面版影片中放置行動版畫面時，使用縮放 1.2，置中。
開場標題卡（2026-10-15 規格）：0–3s 深色背景，一個大標題置中（Geist 76px / 650，text-wrap: balance），文字逐個升起（間隔 0.09s）；2.55s 標題放大並淡出；2.75s 產品 UI 從 1.04 倍淡入至 1 倍。標題文案來自操作者，例如案例 3「Turn your trading idea into a live strategy.」。實作：將逐步解說寫入 tl（非暫停），使用外部 master = gsap.timeline({paused:true}) 處理標題，master.add(tl, 3)，並註冊 master；將 data-duration 與測試頁面的 DUR 各加 3。
4. 撰寫組合
將專案放在 $VIDEO_WORKSPACE/hyperframes/<slug>/：
index.html 單一組合（data-composition-id="main"）
_test.html 測試頁面（複製 assets/test-wrapper.html，修改 DUR 和時間軸 id）
assets/ 本機 gsap、CustomEase、Geist woff2、minara-avatar.png（無 CDN 依賴）
references/ 原始素材副本
audio/ lines.tsv（旁白文案）、vo-placement.tsv（時間點）
storyboard.html / _backups/ / output/
核心輔助函式位於 assets/helpers-reference.js（案例 1 的真實程式碼）：
R(el)：測量元素在任何動畫開始前的 App 內 pt 座標，並儲存於MAP。後續所有點擊均使用這些預測座標 — 若在畫面被推離畫框後才測量，偏移量可達 390pt，導致游標錯位。camTo(t, px, py, s, d)/camReset：攝影機推近。當s>1時，將焦點稍微向中心拉（桌面版：720+(px-720)*0.75，y 軸相同），避免整行被裁切；將位置限制在畫框內，確保外部不顯示。使用變數curS追蹤目前縮放倍率（camTo設定它，camReset將其重置為 1）。curShow / curMove / tap / moveTap：行動版使用半透明軟觸控點，桌面版使用白色箭頭游標；點擊時按壓 + 漣漪。當curS>1時，moveTap同步對點擊目標執行camTo（持續時間 = 移動持續時間 + 0.15s），確保放大時畫面自動跟隨游標。pushIn / pushBack：水平頁面推入，0.45s。splitWords + stream：AI 回答逐字串流。
5. 攝影機與節奏（依據操作者本人所述規則）
- 「滑鼠點擊時或打字時，放大到該特定動作的區域，畫面可以跟隨滑鼠；不點擊時，無需放大。」
- 「讓游標移動時的縮放更明顯」（2026-10-15，取代舊的 ≤1.25 上限）。桌面版縮放倍率：
動作 縮放倍率 打字（輸入框） 1.7 點擊按鈕/分頁/側欄 1.6 閱讀助手對話、Choice Box 1.5 彈窗內的連續動作 1.45，跟隨游標 行動版案例 1 使用 1.25；新的行動版影片也應「明顯」— 請與操作者確認縮放倍率。 - 對於連續點擊（Choice Box 選項、Deploy 步驟彈窗），保持在特寫並全程跟隨；不要每次拉出再推近。
- 當點擊後顯示結果（切換分頁、By symbol / Fills、回測結果出現、指標刷新、AI 生成後工具列數值填入），在點擊後 0.5–0.6s 拉回廣角鏡頭。
- 放大時，允許彈窗的頂部與底部邊緣短暫離開畫框，但游標與被點擊的目標必須保持在畫框內，且文字不得碰觸畫框邊緣。
- 「不需要花俏的鏡頭運動；主要目標是清楚地展示每個步驟」；以正常的旁白速度切換，避免卡頓。
- 畫面內無字幕。
6. 忠實度檢查清單（案例 1 的常見陷阱）
- 打字效果：每個字元使用一個
<span>，透過tl.set(span,{display:'inline'})逐個顯示。請勿每次重新改寫整個textContent— 倒退尋找時會留下錯誤的中間值（v2 版本的佔位文字上疊加了多餘的「C」）。 - 輸入框換行：在設定時，逐字元顯示以測量哪個字元會換行及高度增加多少；同時將上方的快速提問卡片同步上移。
- 圖層順序：快速提問卡片必須位於輸入框白色背景遮罩之上；詳細頁面必須覆蓋分頁列（詳細頁面 z-index > tabbar）。
- 避免類名衝突：文字覆蓋層使用
hz-前綴（hz-main / hz-note / hz-cta）；曾與執行面板的.cta衝突，導致出現黑色條帶。 - 頁面切換後的內容不得滑入狀態列/頂部列下方；表格不得帶有灰色背景。
- 對
fromTo始終使用immediateRender:false，否則在倒退尋找時首幀會錯誤。 - 畫面擷取必須涵蓋：每個點擊前後、打字過程中、換行瞬間、以及每個頁面切換後。
桌面版補充（案例 3 的常見陷阱）
- 避免
…
[因翻譯需求而截斷]