免費
Ember & Bun · 16:9
由此 Skill 渲染
一個免費的 HyperFrames 區塊，把一張小表格變成長條圖賽跑。把期間和各組數據以純文字貼上，長條就會一期一期變長、重新排名、互相超車，旁邊的數字跟著往上跳，座標軸也隨數字攀升自動調整刻度。標題、副標、數據、長條數量、速度、數字格式和強調色都是變數。
更新於 2026年11月3日
你將得到
- 一支 1920×1080 的 MP4 長條圖賽跑，預設每期 2 秒
- 超車、數字跳動標籤和自動調整刻度的座標軸
- 數據用純文字輸入，不需要試算表工具
適合
- 銷售、成長和排名的故事
- 年度回顧和里程碑貼文
- 數據新聞和課堂講解
不適合
- 數十組數據或時間跨度很長的資料
- 需要觀眾慢慢看清的精確數字
關於此 Skill
你只需說
/bar-chart-race 做一支長條圖賽跑，標題「Ember & Bun: burgers sold by month」，期間從六月到十一月，數值以千為單位：Double Stack 12、18、26、35、47、61；Classic Cheese 22、25、28、30、32、33；另外再加四個菜單品項。強調色用橘色。
隨時間變化的排名本身就是故事，長條圖賽跑幾秒內就能講完。給 Bar Chart Race 幾個期間、幾組數據的純文字，它就會把攀升、超車和領先者動起來，搭配俐落的編輯風字體，並在領先的長條上用一個強調色。
運作方式
- 提出需求：以純文字告訴助手標題、期間和每組數據的數值，再加上單位。
- 填入：它把你的文案和顏色寫進區塊的變數，文字長度盡量貼近版面原本設計的長度。
- 算繪：它用
npx hyperframes render算繪一版草稿，檢查幾格畫面，再算繪出最終的 MP4。 - 重複使用：變數都放在一個小小的 JSON 檔裡，下一個版本再算繪一次就好。
小訣竅
- 四到八組數據、四到八個期間最好讀。
- 把強調色給你最想讓觀眾盯著看的那一項。
- 用前綴和後綴標示單位，例如 $、k 或 %。
- 把每期時長調長一點，賽跑會更從容、更好讀。
開源
這是 HyperFrames registry 裡的一個區塊，由 HeyGen 和 HyperFrames 貢獻者製作（heygen-com/hyperframes），以 Apache License 2.0 開源。下載內容包含區塊和它的素材，以及一份由 Reelity 撰寫的 SKILL.md，讓你的助手知道怎麼填寫和算繪；HyperFrames 本身從 npm 執行。
開始前需要準備
- 你需提供
- 你的期間、每組數據的數值、一個標題和單位。
- 依賴
- Node.js 22 或更新版本——必要 · FFmpeg——必要
- 外部費用
- 沒有。HyperFrames 免費開源，在你自己的電腦上算繪。
- 最近測試
- v1.0.0 —
使用者評價
還沒有評價。安裝這個 Skill，成為第一個評分的人。
常見問題
數據要用什麼格式？
每組數據一行：名稱、冒號，再接用逗號分隔的數值，順序和期間一致。助手也可以幫你把試算表轉成這個格式。
影片有多長？
預設每期兩秒，所以六個期間大約 12 秒。每期時長是變數。
為什麼免費？
這是 HeyGen 和 HyperFrames 貢獻者做的開源 HyperFrames 區塊。我們原樣上架，附上 SKILL.md 讓你的助手直接上手，範例是用我們自家品牌 Ember & Bun 做的。
