HyperFrames 是什麼？「9 個 Claude 動畫 Skill」實測：Claude Code 寫 HTML 算出 8 秒水墨動畫

懶人包

• IG 上「9 個 Claude 動畫 Skill」那種水墨動畫，不是 AI 生成影片，是 Claude 寫 HTML、SVG 加 GSAP 動畫程式，再由 HeyGen 開源的 HyperFrames 用無頭 Chrome 逐格截圖、FFmpeg 編成 MP4。
• HyperFrames 是 Apache-2.0，需要 Node.js 22 以上和 FFmpeg；2026-11-04 查到 npm 版本 0.9.9、GitHub 78,402 stars。官方 README 寫明它發布的 skill 一共 9 個，核心 4 個、其餘 5 個按需安裝。
• 我用 Claude Code 做了一支 1920×1080、8 秒、30fps 的〈山水一夢〉：合成檔 149 行 HTML，render 花 29 秒，輸出 1.3 MB、240 格。
• 框架內建的 check 擋下兩個問題：中文字型沒有 @font-face 宣告、署名文字對比度 2.59:1 不到 3:1。Claude 照錯誤訊息裡的修正提示改完，check 全過。
• 適合片頭、Shorts 開場、資料動畫這類可以用形狀和文字畫出來的畫面；要寫實人物或實拍質感，還是得用影片生成模型。

我在 IG 看到 Aashish Pahwa 的貼文，標題是「9 Claude Skills To Create Animations Like This」，下面是一段黑白水墨山景加紅日的動畫。貼文要留言「animate」才私訊清單，我沒有留言，所以不知道他指的是哪 9 個。

我改用另一個方式回答「這種動畫怎麼做」：找出目前讓 Claude 做動畫的主流框架，自己做一支同風格的出來。這篇是那次的完整紀錄。

Claude 做動畫是怎麼做的？

Claude 本身不輸出影片。它寫的是程式：一個 HTML 頁面，裡面有 SVG 圖形、CSS 樣式，和一條 GSAP 時間軸描述「第幾秒誰淡入、誰移動」。

接著交給渲染器。渲染器開無頭 Chrome，把時間軸跳到第 0 格、截圖，跳到第 1 格、截圖，一路截完，再用 FFmpeg 把這些截圖編成 MP4。

做這件事的開源框架主要有兩個：HeyGen 的 HyperFrames 和 Remotion。兩者都走「無頭 Chrome 加 FFmpeg」，差在寫法。HyperFrames README 的對照表是這樣寫的：

那 9 個 Skill 是什麼？

原貼文的清單我沒拿到，不能確定他列的是哪 9 個。我能確認的是：HyperFrames README 寫明它發布的 skill 一共 9 個（skills add --all installs all 9 published skills），清單也寫在專案初始化後產生的 CLAUDE.md 裡：

怎麼安裝 HyperFrames？

前置需求是 Node.js 22 以上和 FFmpeg。我這次的環境是 Windows 11、Node v24.11.1、FFmpeg 8.0。

在 Claude Code 裡用，官方 README 給兩條路，擇一：

# 方式一：Claude Code plugin（含全部 skill，跟著 plugin 更新）
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

# 方式二：只裝核心 4 個 skill，版本跟 CLI 對齊
npx hyperframes skills update

我這次沒有裝進全域設定，只在專案資料夾內建立範本：

npx -y hyperframes init poc-inkwash --example blank --non-interactive --skip-skills
cd poc-inkwash

產出的專案很小：index.html（合成檔）、hyperframes.json、package.json，還有一份給 Agent 讀的 CLAUDE.md。package.json 把 CLI 版本釘死在 hyperframes@0.9.9，同一個專案過幾週重算，畫面還是一樣。

實測：用 Claude Code 做 8 秒水墨山水

我請 Claude Code 照原貼文預覽圖的風格做一支：遠山暈染、主峰描線、霧、紅日、小船、飛鳥，加上直書標題和印章。

成品的關鍵寫法有三個：

• 暈染：SVG 濾鏡 feTurbulence 產生雜訊，feDisplacementMap 用雜訊把山的邊緣推歪，再加一點模糊，邊緣就像墨在紙上暈開。
• 筆刷描線：先量出線條總長，把 stroke-dasharray 和 stroke-dashoffset 都設成這個長度，線就藏起來了；GSAP 把 offset 動到 0，線就像被一筆畫出來。
• 時間軸：所有動畫都掛在一條暫停的 GSAP timeline 上，最後註冊給渲染器。

<script>
  const tl = gsap.timeline({ paused: true });
  tl.to("#far", { opacity: 1, duration: 1.6, ease: "sine.out" }, 0)
    .to("#ridge", { strokeDashoffset: 0, duration: 1.6, ease: "power2.inOut" }, 0.4)
    .fromTo("#boat", { opacity: 0, x: 820, y: 860 },
            { opacity: 1, x: 1080, y: 860, duration: 5, ease: "none" }, 2.6)
    .to("#title", { opacity: 1, duration: 1.4, ease: "sine.out" }, 3.6);

  window.__timelines["main"] = tl;
  tl.seek(0);
</script>

整份 index.html 149 行，沒有圖片素材，只有一個字型檔。

check 擋下的兩個錯誤

渲染前先跑 npm run check，它一次做 lint、執行期錯誤、版面、動態、對比度檢查。第一次就被擋下來：

font_family_without_font_face (error)
Font families used without @font-face declaration: kaiti, dfkai-sb, biaukai.
These are not in the auto-resolved font list, so the renderer cannot supply
them automatically. Text will fall back to a generic font, producing incorrect
typography in the video.

Claude 原本用 CSS 的字型名稱去指楷體，渲染器拿不到系統字型，中文會退回預設字體。修法是把 Windows 內建的 kaiu.ttf 複製到 assets/fonts/，用 @font-face 宣告。

第二次被對比度擋下：署名文字對背景只有 2.59:1，低於要求的 3:1。把文字顏色調深後，第三次全過。今天重跑一次，輸出如下：

Lint
  ◇ 0 errors, 0 warnings
Layout
  ◇ 0 issues across 9 sample(s)
Contrast
  ◇ 7/7 text checks pass WCAG AA
Audio
  ℹ audio_none: The film has no sound: no clip in it plays audio.
◇  Check passed

每個錯誤都帶了 fixHint，Claude 照提示改就好，這兩輪我沒有手動改程式。

先看關鍵格，再渲染

npx hyperframes snapshot --at 1,3,5,7.5

這會截出指定秒數的畫面拼成一張對照表。check 只驗規則，看不出構圖問題：我從這張表看到左下角的署名壓在岩石上，才把它移到左上角。

渲染

npm run render

1.3 MB · 8.0s video · rendered in 29.0s

用 ffprobe 驗輸出檔：

codec=h264 width=1920 height=1080 r_frame_rate=30/1 nb_frames=240 duration=8.000000

成品放在 html.yanchen.app/inkwash-hyperframes，打開會自動播放。

適合拿來做什麼？

這套做法的產出是程式碼，所以有三個特性：同一份 HTML 重算出來的畫面一樣；改標題文字就能批次出片；可以放進 git 看每次改了什麼。

我會拿它做這些：

• 課程片頭、Shorts 開場：換文字重算即可。
• 數據動畫、流程圖動畫：形狀和文字本來就是 HTML 擅長的。
• 產品 demo 的標註與轉場。

• 寫實畫面：人物、實拍質感、自然光影，HTML 畫不出來，這是影片生成模型的工作。
• Pro 功能：/reverse-any-video、/style-sampling 標明屬於 HyperFrames Pro，我沒有測。
• 中文字型：要自己準備字型檔並宣告 @font-face。我用的標楷體是 Windows 內建字型，只拿來本機渲染；要公開散布專案原始碼時，改用 Noto Serif TC 這類開源授權字型。

延伸閱讀

• 不用框架、純 Canvas 2D 寫水彩動畫：Codex 只寫程式也能畫水彩動畫
• 不開 Chrome、用 GPU 算影片的引擎：Kinetograph 實測
• 付費的動態設計 agent 和自建版比較：Mosaic Motion 實測
• 官方文件：hyperframes.heygen.com