hyperframes

Hello panglesd, glad you like it, enjoy. The video was made by me. With real recordings, capturing the screen running Quarter in Windows Terminal at 4K, so the zoom looks nice when downscaled to 1080p. Then edited with HyperFrames where videos are written as HTML, then rendered to MP4. Claude Code wrote the brief following my prompt. Check heygen-com/hyperframes Happy to go into more detail, email in my profile.

Check what an agent skill needs before you install it: 3,134 skills want an account or key Before you install an agent skill, read its SKILL.md frontmatter and body for environment variables, CLIs and sign-in steps, then open every file it links to. In our census of 2026-10-30, 3,134 of the 16,798 skills with a stored prerequisite list (18.7%) named an account, login or API key. An empty list proves nothing. Data as of 2026-10-30, from the Skillselion Agent Skill Dependency Census. Disclosure: we run Skillselion, and this is our own catalog data. We are not affiliated with any publisher named below. A skill install is one command. The sign-up that the skill expects is often a separate step, and you often find out about it when the agent stops halfway through a task and asks you for a token. You can find out before you install. How many agent skills need an account or API key? On 2026-10-30 we read the prerequisite list that our catalog stores for each skill. 16,798 of 64,756 skills (25.9%) have one. All the shares below use those 16,798 skills as the denominator, never the full catalog. - 3,134 skills (18.7%) name an account, API key, access token, credential, login, subscription or secret. - They come from 600 publishing accounts, so the requirement is spread across many publishers. - They hold 16.9% of installs on skills that list prerequisites. Installs are registry counts, and a suite installed as a bundle records one install per skill, so that share can overstate distinct installs. The share moves a lot by category. Among the 14 categories with at least 500 skills that list prerequisites, it is highest in automation and workflow skills (395 of 955, 41.4%) and lowest in Documentation (17 of 595, 2.9%). Our reading, which the census does not test: automation skills tend to call someone else's API, and docs skills mostly work on files already in your repo. Two entries the census quotes show the typical shape: "Deepgram API key" and "Auth0 account and application". Each one points to a third-party sign-up or key you need before the skill can do its job. What kinds of accounts do skills ask for? We picked six skills from the catalog, read the prerequisite list we store for each (fetched 2026-11-02), and then read the upstream SKILL.md at a pinned commit. The two do not always say the same thing, and the SKILL.md wins. | Skill | Our stored prerequisite list | What the SKILL.md tells you | |---|---|---| | gws-gmail skill (GitHub) | "gws CLI installed", "Gmail API credentials" | Frontmatter requires the gws binary. Auth lives in a sibling file. | | notion-api skill (GitHub) | "Notion integration token or OAuth app" | Reads NOTION_API_TOKEN, and asks you for a key if it is missing. | | ElevenLabs text-to-speech skill (GitHub) | "ELEVENLABS_API_KEY", "internet access" | Declares the env var in machine-readable frontmatter. | | Firecrawl CLI skill (GitHub) | "Firecrawl CLI installed and authenticated via FIRECRAWL_API_KEY", "firecrawl --status reports ready credits and concurrency" | Points to a keyless free tier and a status command. | | github-issues skill (GitHub) | "GitHub repository access", "GitHub authentication (gh auth or GITHUB_TOKEN)", "MCP server or gh CLI" | Runs through a GitHub MCP server, which carries its own auth. | | hyperframes-cli skill (GitHub) | "Node.js >= 22", "FFmpeg installed" | No account for local work, but its command map has an auth row for cloud rendering. | The ElevenLabs file is the clean case. The requirement sits in the frontmatter, where a script or a reviewer can find it in one line: > compatibility: Requires internet access and an ElevenLabs API key (ELEVENLABS_API_KEY). Source: text-to-speech/SKILL.md, frontmatter The Google Workspace Gmail skill is the case that catches people. Its own file only says it needs the gws binary. The auth step is one hop away: > Read ../gws-shared/SKILL.md for auth, global flags, and security rules. Source: skills/gws-gmail/SKILL.md, "PREREQUISITE" Open the gws-shared reference skill and you get the two options: gws auth login for browser OAuth, or a service account through GOOGLE_APPLICATION_CREDENTIALS (lines 23 and 26). If you only read the Gmail skill, you miss that choice, and the two options hand an agent different kinds of access. The Notion skill shows what happens when the key is missing. Its fallback is to ask you in the chat: > If neither is available, use AskUserQuestion (or equivalent) to request the API key from the user Source: skills/notion-api/SKILL.md, "Authentication" That is a reasonable design. It also means a token can end up pasted into a conversation transcript if you have not set NOTION_API_TOKEN in the environment first. Decide where the key lives before the agent asks. Why can't you trust an empty prerequisite list? Three reasons, all from the census methodology. First, the lists are model-written. A language model writes them while reading each skill's SKILL.md. They are a reading of the docs, not a parsed manifest. The hyperframes-cli row above is a fair example: the list says Node.js and FFmpeg, which matches the line "It needs Node.js 22+ and FFmpeg." (source), and it leaves out the cloud auth path the same file routes to references/cloud.md. Second, most skills have no list at all. 47,958 skills have no entry stored. The census says it plainly: an empty list is not evidence either way. Third, the keyword rule misses and over-matches. "Account size and sizing constraints" lands in the account class, and a key described in other words is missed. The census methodology section lists every pattern. Coverage also leans toward popular skills: the median skill with a list has 761.5 installs, the median skill without one has 48. If you install long-tail skills, you are more likely to be looking at a skill with no list. How do you check a skill before you install it? Run these in order. Each skill takes a few minutes. 1. Read the frontmatter. Look for compatibility:, requires: (often env: and bins:), and allowed-tools:. When a publisher declares an env var or binary, this is where it goes. 2. Search the body for credential names and sign-in verbs. *_API_KEY, *_TOKEN, *_SECRET, "API key", "OAuth", "login", "credentials". 3. Follow every relative link. ../shared/SKILL.md, rules/install.md, references/*.md. The gws-gmail auth step is one link away, and the Firecrawl skill sends install and authentication (including what it calls "the keyless free tier") to rules/install.md. 4. List the binaries and servers it calls. A skill that shells out to a vendor CLI or talks to an MCP server (see the Skillselion MCP server directory) inherits that tool's login. github-issues needs whatever auth your GitHub MCP server or gh has. 5. Decide where the key lives and what scope it has. A project .env, a shell profile, a CLI's own credential store. Use the narrowest token the service offers. 6. Check for a status or dry-run command. Firecrawl's skill says firecrawl --status "shows auth state, concurrency limit, and remaining credits" (source). Run that before the agent does. Steps 1 and 2, plus every file inside the skill's own folder, fit in a sparse clone and two greps, with nothing installed: # fetch one skill folder, install nothing git clone --depth 1 --filter=blob:none --sparse https://github.com/elevenlabs/skills cd skills && git sparse-checkout set text-to-speech # credentials and sign-in steps grep -rnE '[A-Z][A-Z0-9_]*_(KEY|TOKEN|SECRET)\b|[Aa][Pp][Ii] key|OAuth|log ?in|sign(s|ed)? (in|up)|credential' text-to-speech/ # runtimes, binaries, declared requirements grep -rnE '^(compatibility|allowed-tools|metadata):|requires|npx |pip install|brew install|Node\.js|ffmpeg' text-to-speech/ We ran this on the ElevenLabs folder on 2026-11-02. ELEVENLABS_API_KEY shows up on 16 lines across four files: the SKILL.md and three reference files. The second grep surfaces three install routes (npm, Homebrew and pip) from references/installation.md, which the SKILL.md itself only links to. Swap the repo and folder name for any other skill. What does this checklist not catch? It tells you what a skill needs. It does not tell you what the skill costs or what it is allowed to touch. For cost, the Agent Skill Pricing Census covers which skills need your own key and which keys they name. It reads a different field from this census, so the two shares measure different things. For shell and file permissions, see the Agent Skill Security Census. It also misses scripts. If a skill bundles a Python or shell script, read the script too. A grep on the markdown will not show what a bundled setup script exports. FAQ Do most agent skills need an API key? No. On 2026-10-30, 18.7% of the 16,798 skills with a stored prerequisite list named an account, login or API key. The other 47,958 skills in the catalog have no list stored, which is not evidence that they need nothing. Where does a skill declare its required env vars? When the publisher declares them, look in the SKILL.md frontmatter (compatibility: or a requires: block with env:), then in the body and in any linked reference file. Some skills put auth in a shared sibling file. Is the census prerequisite list complete? No. A model writes it from the SKILL.md text and keeps it short, so it can be incomplete or worded loosely. Treat it as a pointer to what you verify in the upstream file. What should I do if a skill asks me to paste a key into the chat? Stop, set the key as an environment variable or in the tool's own credential store, and rerun. That keeps it out of the conversation transcript. The category breakdown is in the census finding on accounts and API keys. For live catalog totals, see The State of AI Agent Skills 2026. The catalog is refreshed daily from skills.sh, GitHub and MCP registries, ranked by real installs.

skills.911fund.io, a directory that test-runs agent skills. HyperFrames showcase: html to mp4 I run skills.911fund.io, a directory that test-runs agent skills. HyperFrames isn't mine: it's by HeyGen (github.com/heygen-com/hyperframes, Apache-2.0). What it is: an open-source framework that renders HTML, CSS and seekable animations to MP4, with skills for Claude Code (claude plugin install hyperframes@hyperframes). How it was run: a Claude agent in a fresh Claude Managed Agents sandbox installed hyperframes 0.8.210, linted a title card written for the demo (0 errors) and rendered it. It made a 6.0 s, 1080x1920 video, 180 frames, in 22.2 s. What broke: the snapshot command wrote six identical stills of the last frame, so I checked the MP4 frames directly. Video (47 s): tiktok.com and youtube.com Repo: heygen-com/hyperframes Our test page: skills.911fund.io

スキルを入れる前に「前提スキルとCLI」を確かめる: 依存センサスから Claude Code にスキルを1つ入れて試したら、エージェントが gws: command not found で止まった。あるいは ../gws-shared/SKILL.md を読もうとして、そんなファイルはないと言われた。スキルを何本か触っていると、こういう場面に一度は当たると思います。 原因はたいてい単純で、そのスキルが「別のスキル」や「特定のCLI」が先に入っていることを前提に書かれているからです。この記事では、その前提をインストール前に SKILL.md から読み取る方法を、カタログ全体の数字と実際のファイルを使って整理します。 ! この記事は、私たちが運営する Skillselion の調査「エージェントスキル依存関係センサス（2026年10月30日）」のデータをもとにしています。Skillselion は Claude Code / Codex / Cursor 向けのエージェントスキルを実インストール数で並べる独立ディレクトリで、Anthropic、OpenAI、Cursor とは提携していません。カタログは skills.sh、GitHub、MCP レジストリから毎日更新しています。 先に結論です。 2026年10月30日時点で、Skillselion のカタログにある64,756スキルのうち1,034スキル（1.6%）が「先に動かす別のスキル」を名指ししており、この1,034スキルで全スキルインストールの15.0%を占めます。依存の手がかりは SKILL.md の3か所に出ます。frontmatter の requires、本文冒頭の PREREQUISITE 行、そして ../別スキル/ で始まる相対リンクです。入れる前にこの3つを見れば、多くの場合は連鎖が読めます。 スキルが別のスキルに依存するとはどういうことか？ スキルの中身は SKILL.md というマークダウンと、参照ファイルやスクリプトの束です。npm の package.json のような依存の宣言欄が決まっているわけではないので、依存は文章の中に書かれます。「まず ../shared/SKILL.md を読め」「このコマンドは npx xxx で動かす」といった形です。 困るのは、スイートの中の1本だけを入れたときです。リポジトリの中では隣のディレクトリにある共有スキルを、エージェントは当然あるものとして読みにいきます。手元に入っていなければ、そこで止まるか、推測で進みます。推測で進むほうが厄介です。 どれくらいのスキルが別のスキルを前提にしているのか？ 2026年10月30日のセンサスでは、64,756スキル中1,034スキル（全スキルの1.6%）が、先に動かす必要のある別スキルを1つ以上挙げていました（センサスの Finding 05「スキルと MCP サーバーへの依存」）。内訳は次のとおりです。 1つだけ挙げるスキル: 876 2つ挙げるスキル: 158 依存リンクの合計: 1,192本、公開元アカウント数は274 件数は少なく見えますが、インストール数で見ると重みが変わります。この1,034スキルが全スキルインストールの15.0%を持っていて、その15.0%分のうち54.1%を larksuite、mattpocock、heygen-com の3アカウントが占めます。ただしインストール数はレジストリの集計値で、スイートをまとめて入れるとスキルごとに1回ずつ数えられます。この15.0%は「実際に入れた開発者の数」より大きく出ている可能性があります。 いちばん多く名指しされている「前提スキル」も見ておきます。 前提スキル 名指ししているスキル数 名指し元のアカウント belt-sh-cli 27 inference-sh のみ gws-gmail 21 googleworkspace のみ longbridge 20 longbridge のみ 3つとも、名指ししているのは1つの公開元アカウントのスキルだけです。つまり上位の依存は「同じ作者のスイートの中」で閉じています。なお belt-sh-cli を挙げる27件のうち8件は、カタログ上で別リスティングのコピーと判定されたものです。コピーを除くと gws-gmail（21）が1位、longbridge（20）、belt-sh-cli（19）の順になります。 実務での読み方はこうです。スイートの1本を入れるなら、同じリポジトリの共有スキル（*-shared や、スイート名そのもののスキル）も一緒に入れる。上位の連鎖はほぼこれで片付きます。 実例: hyperframes-cli は何を前提にしているか？ 前提スキルを挙げるスキルの中でインストール数が最も多いのは、heygen-com の hyperframes-cli スキル（動画コンポジション用CLI）で、センサス時点のインストール数は1,311,338でした。センサスでは、同じリポジトリの hyperframes スキル（HTML ベースの動画コンポジション生成）を前提として挙げています。 実ファイルを開くと、それが文章でどう書かれているかが分かります。見出し直後の段落に、CLI の前提がこう書かれています。 "It needs Node.js 22+ and FFmpeg." 出典: heygen-com/hyperframes skills/hyperframes-cli/SKILL.md（2026年10月31日に取得） さらに本文には ../hyperframes/references/ を指す相対リンクが3か所あります。プラグイン経由のインストール手順、フォーマットの説明、モーションの参照先です。hyperframes スキルが隣にない状態だと、この3つは解決できません。 私たちがこのスキルを読み込んだ hyperframes-cli のディープダイブ（リスティングページ内の解説）でも、スキル単体で入れると参照先のファイル4つが手元に来ないことを確認しています（2026年8月20日時点のファイルでの確認）。そのうち1つは、レンダリングの承認とは何かを定義しているファイルです。「動くけれど肝心の判断基準が抜けている」状態になるわけです。 gws 系スキルの SKILL.md には何が書いてあるか？ Google Workspace の CLI まわりも分かりやすい例です。googleworkspace/cli の skills/gws-gmail-send/SKILL.md の frontmatter と冒頭はこうなっています（2026年10月31日に取得、抜粋）。 metadata: version: 0.22.5 openclaw: category: "productivity" requires: bins: - gws --- gmail +send > PREREQUISITE: Read ../gws-shared/SKILL.md for auth, global flags, and security rules. If missing, run gws generate-skills to create it. ここから読み取れる前提は2つです。 gws バイナリが $PATH にあること（requires.bins） 認証やグローバルフラグを説明する gws-shared スキル（gws CLI の共有リファレンス）が隣にあること 同じファイルの末尾の関連リンクは、gws-shared と gws-gmail スキル（Gmail 操作の全コマンド）の2つを指しています。センサスで gws-gmail が21件の googleworkspace スキルから名指しされている背景には、こうした書き方があると考えられます。 一方で、gws-gmail 自身の SKILL.md も冒頭で ../gws-shared/SKILL.md を読むよう指示しています。センサスの前提一覧は言語モデルが SKILL.md（タグ付け処理の回によっては抜粋）を読んで書いたもので、どの名前を拾うかはモデルの読み方に左右されます。数字は全体の傾向をつかむのに使い、個別のスキルは実ファイルで確かめる。この順番が安全です。 どのCLIが前提にされやすいのか？ CLI はスキルの前提としてよく出てきます。前提一覧を持つ16,798スキル（全64,756スキルの25.9%）のうち、2,142スキル（12.8%）がコマンドラインツールを挙げており、前提一覧を持つスキルのインストールの28.8%を占めます（センサスの Finding 04「コマンドラインツールへの依存」、2026年10月30日時点）。以下の割合も、断りがない限りこの16,798スキルが分母です。 中身を見ると、2つの型がはっきり分かれます。 ベンダーCLI型: 1つの公開元アカウントに集中する Lark CLI: 46件の前提一覧に登場し、インストール数は23,659,918。前提一覧を持つスキルのインストールの15.2%です。そのうち43件（23,659,902インストール）は、Lark/Feishu の名前を持つ2アカウント（larksuite と open.feishu.cn）のスキルで、スキル名は29種類。14の名前が両方のアカウントに出てきます。カタログ上のコピー判定を除くと、割合は11.6%（17,083,071インストール）まで下がります。 gws CLI: 107件の前提一覧に登場し、すべて googleworkspace アカウントのスキルです。インストール数は3,189,373。 Lark 側も構造は gws と同じです。larksuite/cli の skills/lark-base/SKILL.md は frontmatter に requires: bins: ["lark-cli"] を持ち、説明文の中で認証と権限まわりは lark-shared に回すよう書いています。lark 系スキルを1本だけ入れるなら、lark-shared スキル（Lark CLI の認証と共通設定）と CLI 本体の両方が必要になる、ということです。 汎用ツール型: 多くの作者に広がる ツール 前提一覧の件数 公開元アカウント数 Claude Code 381 147 GitHub CLI（gh） 208 106 Docker 156 66 Playwright 123 82 FFmpeg 99 52 （2026年10月30日時点のセンサスより） こちらは特定のスイートに閉じていません。たとえば gh-cli スキル（GitHub CLI の操作）のように gh そのものを扱うスキルもあれば、PR 作成の手順の途中で gh を呼ぶスキルもあります。GitHub CLI 本体（cli/cli）や Playwright は多くの開発者の手元にすでにあるので、問題になるのはバージョンと認証状態のほうです。 まとめると、ベンダーCLIは「CLI + 認証 + 共有スキル」のセットで考え、汎用ツールは「入っているか、ログイン済みか、バージョンは足りるか」を確認する、という分け方が実務では使いやすいと思います。 インストール前に SKILL.md のどこを見ればいいか？ 依存の連鎖に絞った確認ポイントは4つです。 frontmatter の requires / metadata.requires: bins に並んだコマンドが手元にあるか、command -v で確かめます。 本文冒頭の PREREQUISITE や "Read ... first" の行: 名指しされた別スキルを一緒に入れます。 ../<別スキル>/ で始まる相対リンク: 前提として明記されていなくても、参照先が別スキルのディレクトリなら実質的な依存です。 npx <パッケージ> とバージョン表記（Node.js 22+ など）: スキルが同梱していない実行環境への依存です。 私たちは入れる前に、raw の SKILL.md を取ってきて grep するだけで済ませています。 入れる前に SKILL.md を取得し、依存の手がかりになる行だけ拾う URL=raw.githubusercontent.com curl -s "$URL" | grep -nE 'requires|bins|PREREQUISITE|../[a-z0-9-]+/|npx|[0-9]++' 相対リンク先の別スキルを一覧にする curl -s "$URL" | grep -oE '../[a-z0-9-]+/' | sort | uniq -c requires.bins に出てくるコマンドが手元にあるか for b in gws; do command -v "$b" >/dev/null || echo "missing: $b"; done 上の例を2026年10月31日に実行すると、requires: と bins: の行、../gws-shared/SKILL.md を指す PREREQUISITE 行、末尾の gws-shared と gws-gmail への相対リンクが出てきました。これだけで「gws 本体 + gws-shared + （場合により）gws-gmail」が要ると分かります。 Skillselion のリスティングページでも、「At a glance」欄に前提が1行で出ます。hyperframes-cli なら Node.js 22以上と FFmpeg が必要と表示されます。ただしこれもカタログ側の要約なので、最終的な確認は SKILL.md で行ってください。 MCP サーバーも前提に入ることがあります。前提一覧を持つスキルのうち790件（4.7%、232アカウント）が MCP に触れていて、「Chrome DevTools MCP サーバーが接続済みであること」のように必須として書くものと、「CLI か MCP のどちらか」のように選択肢として書くものがあります。後者の書き方は、Longbridge の CLI か MCP アクセスを求める一覧に見られます。longbridge スキル（証券データと取引操作）は SKILL.md の冒頭で、自らを CLI と MCP の両方を持つプラットフォームとして紹介しています。接続先のサーバーを探すなら MCP サーバーのディレクトリにまとめています。 前提一覧が空なら、依存はないと考えていいか？ いいえ。ここは誤解しやすいので、数字の性質をはっきりさせておきます（すべて2026年10月30日時点）。 前提一覧が保存されているのは64,756スキル中16,798（25.9%）だけです。残りの47,958スキルには記載がありません。 その47,958のうち13,694はタグ付け処理が走ったうえで一覧が空でした。空の一覧は「依存がない」証拠にも「ある」証拠にもなりません。 一覧はタグ付けの段階でモデルに1から3件を書かせる設計です。上限の3件が入っているスキルは、実際にはもっと多くを必要としている可能性があります。 一覧があるスキルはインストール数が多い側に偏っています。中央値は一覧ありが761.5、一覧なしが48です。 インストール数はレジストリの集計で、アクティブユーザー数ではありません。スイート一括インストールはスキルごとに1回ずつ数えられます。 カタログ上でコピーと判定されたリスティング（4,136件、6.4%）も1件として数えています。 つまりセンサスの数字は「人気のあるスキル群で、依存がどう書かれているか」の地図です。個々のスキルについて依存がないと保証するものではありません。 前提にアカウントや API キーがどれくらい含まれるか、スキルがどの権限を要求するか、といった別の切り口は、それぞれ別の調査にまとめています。 エージェントスキル料金センサス（2026年10月）: 実行にお金がかかるスキル、自前キー持ち込みのスキル エージェントスキル セキュリティセンサス（2026年8月）: シェル実行やファイル書き込みなどの権限 AIエージェントスキルの現状 2026（ライブ集計）: 固定版ではなく、日々更新される全体の数字 よくある質問 スキルの依存関係は自動で解決されないのか？ 自動では解決されません。SKILL.md の依存記述は、package.json のような機械向けのマニフェストとは性質が違います。センサス自体も、前提一覧を「モデルが文章から読み取った値」として扱っています。frontmatter に requires.bins を持つスキルもありますが、書式はリポジトリごとにまちまちです。スイートの一部だけを入れるなら、共有スキルと CLI は自分で入れておくのが確実です。 センサスの数字を記事や社内資料で引用してもいい？ はい。CC BY 4.0 で公開しています。「Skillselion Agent Skill Dependency Census, October 2026」と明記し、センサスのページにリンクしてください。数字はすべて2026年10月30日時点で固定されています。 スイートをまとめて入れると、インストール数はどう数えられる？ スキルごとに1回ずつ記録されます。10本のスイートを一括で入れると、10スキルそれぞれに1インストールが付きます。センサスのインストール比率が「実際に使っている開発者の割合」より大きく出うるのはこのためです。 私たちは Skillselion を運営しています。記事中の公開元アカウント名は説明のために挙げたもので、Skillselion はどの公開者とも提携していません。 最終更新: 2026年10月31日（センサスのデータは2026年10月30日時点）

HyperFrames vs CoAnimator: Features, Pricing and Best Uses If you have ever shipped a product video, you know it is cheap to make once and expensive to keep current. When your interface changes, your pricing page moves, or the narration needs another language, someone has to reopen the project, find the affected scenes, and render again. HyperFrames and CoAnimator both go after that cost. A coding agent writes the video as editable files, so a change becomes an edit and a re-render. HyperFrames is an open engine you assemble, and CoAnimator is an agentic animation studio that arrives assembled. This post compares how each works, where each is strongest, and which one fits your team. What is HyperFrames? !HyperFrames web page HyperFrames is an open-source framework from HeyGen that turns HTML, CSS, media, and seekable animations into MP4 videos. A composition is an HTML file, and your coding agent writes it while the CLI previews and renders it. - Open and free: It is Apache 2.0 with no per-render fees or commercial-use thresholds, and you can read or fork the renderer. - HTML as the format: Agents write HTML fluently, so a video diffs like any front-end file. GSAP, CSS, Lottie, Three.js, Anime.js, and the Web Animations API all work. - Works with your agent: Seven published skills teach Claude Code, Codex, Cursor, Gemini CLI, and others the composition rules, the CLI, and the catalog. - Embeddable: The <hyperframes-player> web component and engine packages let you build video into your own product. - Built for volume: Variables, AWS Lambda deployment, and JSONL batch rendering suit personalized and scheduled videos. - A block catalog: About 450 blocks such as transitions, captions, charts, and maps install with hyperframes add. - Media built in: A media skill adds voiceover, music, sound effects, and transcripts through HeyGen or free local tools. This composition fades a title in after one second, adapted from the README. <div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080"> <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">v2.4 shipped</h1> <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script> <script> const tl = gsap.timeline({ paused: true }); tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1); window.__timelines = window.__timelines || {}; window.__timelines.launch = tl; </script> </div> I think HTML is the right format for this job, because agents already write it well. The catch is that every animation must run on a seekable clock, which the limitations cover. Here is a user's attempt. Máximo Gavete, posting in Spanish, started from a course PDF and used a simple prompt to generate an HTML video that he could correct and render inside Claude Code. He says Sonnet 4.6 was enough and he did not need Opus. {% twitter 2045395315197432133 %} What is CoAnimator? !CoAnimator web page CoAnimator is an agentic animation studio for macOS, Windows, and Linux that turns the coding agent you already use into a video maker. You describe the video, and the agent builds it while a live stage updates. - Works with your agent: Claude Code, Codex, Antigravity, OpenClaw, and others become video tools. Templates ship with skills for each video format, so one project works with any of them. - No code needed: The agent writes the animation, timeline, and narration as editable files, and coders can still open the project. - Link to video: Paste a docs page or blog post and the agent researches it and drafts the script. Research mode, powered by MCP360, goes deeper, and how well a page is read depends on your agent. - Any kind of video: Demos, launches, tutorials, changelogs, explainers, motion graphics, 3D, and edits on real footage with captions and effects. - Plugins: The ElevenLabs plugin handles voiceover, the Postiz plugin handles publishing, and the MCP360 plugin, a gateway to 100+ tools by its own description, handles research. It all happens in one chat instead of many tabs. - Consistent look: Templates carry the agent's playbook and documented looks, so you do not restate the theme. - Free plan with no expiry: There are no credits and no card needed, and a lifetime license is also available. This post from @superman_space shows a video created from a document with CoAnimator. {% twitter 2112543420392902790 %} Here is a video CoAnimator created and posted on its YouTube channel, Life Leaves a Trace. It combines a storyboard, animated scenes, narration, music, and sound effects. {% youtube yrl5cVl3U8k %} A curated list of Claude Opus 5.5 demos also credits Rege with a space film made in CoAnimator in about 20 to 30 minutes, per the list. HyperFrames vs CoAnimator: Key Differences This table covers the differences you will notice first. | | HyperFrames | CoAnimator | | --- | --- | --- | | Category | Open-source rendering framework | Agentic animation studio | | Primary user | Developers comfortable with HTML, JavaScript, and a Node toolchain | Anyone who can describe a video, using the coding agent they already have | | Starting point | A prompt, or a document or repo through its skills | A prompt or a link in chat, and the agent researches, drafts, and builds | | Editing model | Agent edits HTML, with a browser Studio for preview and edits | Chat with an agent, a live stage, and a timeline | | Cloud rendering | AWS Lambda through hyperframes lambda | None today, with cloud workers on the roadmap | | Automation | Variables, plus batch rendering on Lambda | Scriptable coa render, with no per-render fee | Workflow comparison Three moments show where the tools diverge, and you will meet all of them. They are the first video, the first revision, and the fine detail. Creating Videos with HyperFrames vs CoAnimator HyperFrames needs Node.js 22+ and FFmpeg, or Docker mode, which bundles FFmpeg. You install the agent skills, run npx hyperframes init, and describe the video, and hyperframes lint checks the composition before you render. None of it is hard, but it is a toolchain, and someone on your team has to own it. CoAnimator needs a desktop install, a compatible coding agent, and FFmpeg and FFprobe, which its blog says the app prompts you to set up. You open a template or describe the video and steer from the stage. The plugin keys you want, such as ElevenLabs, are setup you still own. Here is an illustrative brief, not a real project, to show how little you need to write. > Read docs.example.com and research our product. Build a 60-second tutorial for new developers in a calm, friendly tone. Draft the script first and show me a scene plan. After I approve it, add narration and a quiet music bed, then render. CoAnimator's guides suggest asking for a scene plan and representative frames before the full build, so wrong facts surface early. Starting from a document or link is not unique to CoAnimator, since HyperFrames lists docs-to-video and PDF-to-video use cases too. In both tools, output quality follows your agent and your brief. A paragraph covering the audience, tone, length, and key moments beats "make a cool video". Here is a real HyperFrames attempt. Máximo Gavete, posting in Spanish, started from a course PDF and used a simple prompt to generate an HTML video that he could correct and render inside Claude Code. He says Sonnet 4.6 was enough and he did not need Opus. {% twitter 2045395315197432133 %} On setup effort alone, I give it to CoAnimator. HyperFrames asks more of you up front and pays it back in plain-HTML control. Revising a video I weigh the revision path more heavily than the first render, and you should too, because a video is only as useful as it is cheap to update. For repeated structures, HyperFrames offers variables and a batch mode on Lambda that reads a JSONL file. CoAnimator's pitch is that a UI change should be a pull request, because project files diff like code and the agent edits the affected scene before you re-render. You can also redirect on the live stage with notes such as "slow the intro" or "swap that screenshot", and regenerate a single narration line when the script changes. Picture a 30-second release video with a title card and three feature cards. HyperFrames can generate it from new variables each release. With CoAnimator, the agent updates a project built from a template, and its developer page describes a scheduled version with a cron job, an agent reading the week's merged pull requests, and coa render at the end. HyperFrames is cheaper per change when your structure repeats. CoAnimator is cheaper when each video changes shape. Editing Control and Customization Because HyperFrames is open, you can read or fork the renderer, which CoAnimator's renderer does not allow. CoAnimator offers hand control instead, with a stage, media panel, and draggable timeline so you can fix a detail without asking the agent. HyperFrames vs CoAnimator: Features Compared | Need | HyperFrames | CoAnimator | | --- | --- | --- | | Timeline | Tracks set by data attributes in markup | Draggable multi-track timeline the agent also edits | | Research and script | Left to your agent, with no research step in the README | Agent researches and drafts, with MCP360 research mode | | Video styles | Anything a browser renders, via GSAP, Lottie, Three.js, SVG, and Canvas | Motion graphics, explainers, 3D, hand-drawn, and ASCII looks | | Real footage | Clips can be composed, but no footage-effects playbook is listed | Describe a look and effects land on your recording | | Templates | About 450 blocks via hyperframes add, plus design templates | Templates for demos, launches, tutorials, and podcasts, each with agent playbooks | | Captions | Caption blocks, plus transcription in the media skills | Captions the agent styles and times to the narration | | Voiceover | HeyGen free-usage path or local Kokoro, per the media skills | ElevenLabs plugin places narration on the timeline, and single lines regenerate | | Music and sound | HeyGen catalog, plus Lyria and MusicGen in a skill directory | Soundtrack and sound plugins | | Images and generators | Media skill covers images, icons, avatars, and generated video | AI images plugin, with Veo and HeyGen listed as coming | | Publishing | A CLI publish command, with no social posting listed | Plugins for YouTube and social, including Postiz | | Extras | Community playground at hyperframes.studio | Free browser tools for captions, GIFs, mockups, and scripts | If you want everything reachable from one chat, CoAnimator's edge is breadth out of the box, from footage effects to 3D to voice. I would not write HyperFrames off as just an engine, though, because its skills already cover voiceover, music, captions, and transcripts. Video Rendering, Automation, and CI/CD HyperFrames has a cloud render path on AWS Lambda, and CoAnimator does not offer a hosted one yet. HyperFrames seeks each frame in headless Chrome and falls back to software WebGL when no GPU is present. hyperframes lambda deploys a render stack to your AWS account, and renders split into plan, chunk, and assemble steps. CoAnimator's coa render uses the same chunk-parallel pipeline as its editor, and its developer page says every frame is a pure function of the timeline clock, so headless output matches what you approved on the stage. Two other dev.to writeups that cite its CLI docs say byte-identical output is not guaranteed across hardware and platforms. Verify that on your runner before wiring CI. # HyperFrames, reproducible local render and AWS Lambda npx hyperframes render --docker --output demo.mp4 hyperframes lambda deploy hyperframes lambda render ./my-project --width 1920 --height 1080 --wait # CoAnimator, headless coa render my-demo --preset 1080p60 --runners 8 coa render launch-video.coa --out launch.mp4 In CI, HyperFrames fits any Node.js 22 pipeline with a lint step before the render, and CoAnimator's CLI exits 0 or 1 so a failed render fails the build. If I were wiring CI today, I would pin the HyperFrames version and render with --docker, and I would test CoAnimator's CLI on the exact runner OS before trusting it. HyperFrames vs CoAnimator: Pricing and Licensing | | HyperFrames | CoAnimator | | --- | --- | --- | | Cost | Free under Apache 2.0, with no per-render fees or commercial-use thresholds | A free plan with no expiry, and a lifetime license also available | | Extras | AWS bills for Lambda and S3 if you use them, and media services such as HeyGen's free-usage path have their own terms | Plugins such as ElevenLabs run on your own API keys | Neither tool charges per render. For both, add your agent subscription and any plugin usage, and with HyperFrames add an AWS bill if you render in the cloud, plus the time you spend wiring the workflow. Limitations and risks These six limits per tool are the ones I would check before you commit. HyperFrames - Animation has to be seekable. The docs list gotchas, such as GSAP animating a video element's size directly, which can stop frames from updating, and timed elements that need class="clip". - Local renders can differ slightly across systems because of GPU compositing and subpixel antialiasing. Exact reproducibility means rendering with --docker. - Headless Chrome can struggle on small machines. One GitHub issue reports a render freezing at 25% on an 8 GB laptop, on an older version. - The desktop Studio is reported only for macOS and Linux, with a HeyGen sign-in, per third-party sources. The README itself calls the browser Studio available but evolving. - The Lambda path needs an AWS account, credentials, and the SAM CLI, and your account's concurrency limits cap how far a batch can scale. - The README lists no research step, script drafting, or social publishing, so you bring those through your agent or your own pipeline. CoAnimator - It cannot be forked or embedded. CoAnimator says it ships finished videos, not a video feature for your own app. - There is no hosted render service yet, so high-volume rendering is up to you. Cloud workers are on the roadmap. - The coa installer is macOS-first, and other writeups say headless Linux needs FFmpeg, FFprobe, and a display server such as xvfb-run. - Version 0.7.2 has no desktop screen recorder, per its blog, even though a capture plugin is advertised, so you import recordings. - Output is MP4 only today. Lottie export is on the roadmap. - Research mode, which runs on MCP360, is part of the lifetime license, and the pricing page does not state team terms. Both projects are below version 1.0, so pin versions and recheck before you roll either one out to a team. If I had to name the one limit that matters most for each, it is the seekable-animation rule for HyperFrames and the lack of source access for CoAnimator. How to get started with each tool I would not decide from a feature table, and you should not either. Both are free to start, so build a 15-second release video in each, then change the title and one image. Record the setup time, the number of prompts, the render time, and the time the change took. Then render the same project twice on one machine and compare checksums, which tests each tool's determinism claim against your own fonts, clips, and audio. HyperFrames 1. Install Node.js 22+ and FFmpeg, or plan to use --docker. 2. Run npx hyperframes skills update. Claude Code users can instead run claude plugin marketplace add heygen-com/hyperframes and claude plugin install hyperframes@hyperframes. 3. Run npx hyperframes init my-video, then ask your agent for the video, for example with "Using /hyperframes, create a 15-second product intro with a fade-in title." 4. Run npx hyperframes lint, preview, and render. HeyGen's own beginner video, about ten minutes long on its official YouTube channel, walks through connecting HyperFrames to Claude Code, Codex, and Google Antigravity. {% youtube 4iMWm0aOx8E %} CoAnimator 1. Download the app from coanimator.com for macOS, Windows, or Linux. 2. Connect the coding agent you already use, or use the bundled one. 3. Open a template, or just describe the video, and paste a link to your docs if you want the agent to work from them. 4. Steer on the live stage, then export. For terminal or CI use, enable the coa command from the app and run coa render my-demo. If one tool made the change easy and the other made it painful, you have your answer. Which one is right for you? If you need to own or embed the engine, pick HyperFrames. If you want a finished workflow around it, pick CoAnimator. Three questions decide which of those describes you. 1. Do you need the source or an embeddable engine? If you want to fork the renderer, embed video generation in your product, or meet an open-source license requirement, choose HyperFrames. If not, either works. 2. Who edits the video later, and where? Engineers working in a repo with HTML point to HyperFrames. A mixed team that wants a timeline app on macOS, Windows, or Linux points to CoAnimator, since HyperFrames' desktop Studio is reported as macOS and Linux for now. 3. How many renders, and where do they run? Many personalized or scheduled renders in the cloud point to HyperFrames and Lambda. Occasional, individually directed videos point to CoAnimator. As a rule, if the video has to be produced unattended, I would pick HyperFrames, and if a person is directing it, I would pick CoAnimator. This is a workflow judgment, not a benchmark result, and if you have both jobs, use both. Pick by job type, then run the 15-second test above to confirm it. FAQ Is CoAnimator an alternative to HyperFrames? They overlap on the core idea, building videos from editable files with coding agents. Choose HyperFrames if you need an open engine for pipelines and embedding, and CoAnimator if you want an agentic animation studio for directed videos. Can CoAnimator make a video from a docs link without a separate script or research tool? Yes, if your agent can fetch web pages. Paste the link into your brief and the agent works from it. CoAnimator says the agent researches your product and drafts the script, and research mode goes deeper through the MCP360 plugin. Which is better for personalized or automated video? HyperFrames, because of its variables and Lambda batch mode. If you need data-driven batches, CoAnimator's documentation does not describe that workflow. Which is better for product demos? CoAnimator, which ships templates and plugins for demos. You can produce them with HyperFrames too, with more assembly.

Keeping Hyperframes Render Requests Behind a Secure Next.js Boundary Keeping Hyperframes Render Requests Behind a Secure Next.js Boundary At 3:00 AM, your on-call pager wakes you: rendering credentials leaked into a client bundle, a customer's video quota exhausted by replayed requests, or worse—arbitrary HTML rendering with full cloud metadata access. HTML-to-video looks straightforward until rendering becomes a privileged operation. A browser submits a template identifier, a server schedules work, and a worker produces a video. The dangerous shortcut is letting the browser submit arbitrary HTML, renderer options, or service credentials along the way. As an external architect evaluating Hyperframes, I treat its "Write HTML. Render video." model as a rendering boundary, not an authorization boundary. The integration below is an application-side design, not a claim about Hyperframes' internal APIs. The developer pain point is keeping render submission secure without making the dashboard wait for rendering infrastructure. Separate submission from execution The request path should be: browser → Next.js Server Action → PostgreSQL job → isolated render worker. The worker owns the Hyperframes integration. Next.js owns session verification, template ownership, and durable acceptance. That separation addresses two failures tutorials routinely overlook. One incident pattern starts with a shared configuration module re-exported through a "use client" entry point. A credential copied into an exported configuration object can reach the browser bundle. Next.js does not automatically expose ordinary server environment variables, but explicit serialization and public build-time configuration still leak secrets. Put privileged dependencies behind server-only; inspect generated client bundles before rotating a compromised key. The performance counterpart is a dashboard that awaits recent jobs before returning its submission form. That creates a data waterfall and can delay the page's largest visible content. A nested Suspense boundary lets the form stream immediately while job history loads independently. A minimal application-side implementation This assumes an existing Next.js App Router application and PostgreSQL. Install zod, jose, pg, and server-only, plus @types/pg for development. Provision DATABASE_URL and a random, minimum-32-byte SESSION_SECRET through your deployment's secret manager. Your login service must issue an HS256 JWT cookie named session, with issuer render-app, audience render-dashboard, a user UUID in sub, and an expiration. Set that cookie HttpOnly, Secure, and SameSite=Lax. Apply the SQL first, then create the labeled files: /* Database migration: CREATE TABLE templates ( id uuid PRIMARY KEY, owner_id uuid NOT NULL, html text NOT NULL ); CREATE TABLE render_jobs ( id uuid PRIMARY KEY, owner_id uuid NOT NULL, template_id uuid NOT NULL REFERENCES templates(id), status text NOT NULL DEFAULT 'queued', created_at timestamptz NOT NULL DEFAULT now() ); CREATE INDEX render_jobs_owner_created ON render_jobs(owner_id, created_at DESC); */ // lib/server.ts import "server-only"; import { Pool } from "pg"; import { jwtVerify } from "jose"; import { cookies } from "next/headers"; import { z } from "zod"; const globalDb = globalThis as typeof globalThis & { db?: Pool }; export const db = globalDb.db ??= new Pool({ connectionString: process.env.DATABASE_URL, max: 5, connectionTimeoutMillis: 3000, statement_timeout: 5000, }); export async function userId(): Promise<string | null> { const secret = process.env.SESSION_SECRET; if (!secret || Buffer.byteLength(secret) < 32) { throw new Error("Invalid session configuration"); } const token = (await cookies()).get("session")?.value; if (!token) return null; try { const { payload } = await jwtVerify( token, new TextEncoder().encode(secret), { algorithms: ["HS256"], issuer: "render-app", audience: "render-dashboard", requiredClaims: ["exp", "sub"], }, ); return z.string().uuid().parse(payload.sub); } catch { return null; } } // app/actions.ts "use server"; import { randomUUID } from "node:crypto"; import { z } from "zod"; import { db, userId } from "../lib/server"; export type State = | { kind: "idle" } | { kind: "queued"; jobId: string } | { kind: "error"; code: "AUTH" | "INPUT" | "UNAVAILABLE"; message: string; }; export async function enqueue( _: State, form: FormData, ): Promise<State> { try { const owner = await userId(); if (!owner) { return { kind: "error", code: "AUTH", message: "Sign in again." }; } const parsed = z.string().uuid().safeParse(form.get("templateId")); if (!parsed.success) { return { kind: "error", code: "INPUT", message: "Invalid template." }; } const result = await db.query<{ id: string }>( `INSERT INTO render_jobs (id, owner_id, template_id) SELECT $1, $2, id FROM templates WHERE id = $3 AND owner_id = $2 RETURNING id`, [randomUUID(), owner, parsed.data], ); if (!result.rows[0]) { return { kind: "error", code: "INPUT", message: "Template unavailable." }; } return { kind: "queued", jobId: result.rows[0].id }; } catch { return { kind: "error", code: "UNAVAILABLE", message: "Submission unavailable. Try again later.", }; } } // app/render-form.tsx "use client"; import { useActionState } from "react"; import { enqueue, type State } from "./actions"; export function RenderForm() { const [state, action, pending] = useActionState<State, FormData>( enqueue, { kind: "idle" }, ); return ( <form action={action}> <label>Template UUID <input name="templateId" required /></label> <button disabled={pending}>Queue render</button> <p role="status"> {state.kind === "error" ? state.message : state.kind === "queued" ? `Queued ${state.jobId}` : ""} </p> </form> ); } // app/page.tsx import { Suspense } from "react"; import { redirect } from "next/navigation"; import { db, userId } from "../lib/server"; import { RenderForm } from "./render-form"; export const runtime = "nodejs"; async function RecentJobs({ owner }: { owner: string }) { const { rows } = await db.query<{ id: string; status: string }>( `SELECT id, status FROM render_jobs WHERE owner_id = $1 ORDER BY created_at DESC LIMIT 10`, [owner], ); return <ul>{rows.map(job => <li key={job.id}>{job.id}: {job.status}</li>, )}</ul>; } export default async function Page() { const owner = await userId(); if (!owner) redirect("/login"); return ( <main> <h1>Render dashboard</h1> <RenderForm /> <Suspense fallback={ <div aria-busy="true" aria-label="Loading recent renders" style={{ minHeight: 240, background: "#eee" }} /> }> <RecentJobs owner={owner} /> </Suspense> </main> ); } What this boundary buys—and costs The authorization predicate lives inside the insert. A guessed template UUID cannot enqueue another customer's template. The browser receives a job identifier, never rendering credentials or HTML. The database row is the queue, avoiding a database-write/message-publish dual-write failure. A worker still needs atomic claiming, leases, bounded retries, and failure recording. At higher throughput, that operational burden may justify a dedicated queue. Submission is not idempotent: retries can create duplicate jobs. Before billing per render, add a validated request identifier and a unique owner/request constraint. Also apply per-user quotas before accepting work. Finally, stored HTML is not inherently safe. Run rendering with restricted network access, blocked cloud metadata endpoints, resource limits, and no application secrets. Suspense improves delivery timing; it does not make database queries faster or guarantee better LCP. Measure the actual page while keeping slow history queries outside the critical rendering path. The hardest trade-off The single hardest decision here is where to draw the trust boundary when stored HTML can still perform network requests, enumerate local resources, or exploit renderer bugs. Sandboxing the render worker adds latency and infrastructure complexity. Not sandboxing risks lateral movement if a customer template is compromised or deliberately malicious. How do you balance rendering flexibility against isolation cost? Do you parse and sanitize HTML server-side, or do you isolate the renderer and accept the performance hit? What's your threshold for treating user-supplied templates as hostile input?

HTML/CSS/GSAPを確定的にMP4動画へ変換するhyperframesを実際に検証した HeyGen社が2026年4月にOSS公開したhyperframes(Apache-2.0)を実際にインストールし、自作のGSAPアニメーションをMP4へレンダリングし、同じコマンドを複数回実行して出力が本当に決定的(毎回同じ)かどうかをSHA256で確認した。 hyperframesとは何か hyperframesは、HTML・CSS・GSAP/Lottie/Three.jsなどで書いたアニメーションを、ヘッドレスChromeで1フレームずつ確定的にシークしながらスクリーンショットを取り、FFmpegでエンコードすることでMP4動画に変換するフレームワークである。 「HTMLを書くだけで動画になる」ことと、AIコーディングエージェント(Claude Code・Cursor・Codexなど)との連携を前面に押し出しているのが特徴で、CLI・エージェント向けスキル・ブラウザ上のスタジオエディタを備える。 依存パッケージにはpuppeteer-coreや@puppeteer/browsersが含まれており、内部的にはPuppeteerでヘッドレスChrome(Chrome Headless Shell)を操作している。 コアのHTML→MP4レンダリングに外部APIキーは不要で、GPUも不要である。 検証環境と準備 Node.js v22.22.0・ffmpeg 6.1.1という条件で、npx hyperframes@0.8.209 doctorを実行すると、Node/ffmpeg/ffprobeはOKだが肝心のChrome Headless Shellが未取得と表示された。 $ npx hyperframes@0.8.209 browser ensure Downloading Chrome Headless Shell v152.0.7977.30 — 100% (113.9 MB / 113.9 MB) Download complete Source: download Path: /root/.cache/hyperframes/chrome/chrome-headless-shell/linux-152.0.7977.30/... — Ready to render. 約114MBのダウンロードは問題なく完了し、doctorの結果もすべて✓になった。 続けてnpx hyperframes@0.8.209 init demo --example blank --non-interactive --skip-skillsでプロジェクトを雛形から作成した。 つまずいた点: デフォルトテンプレートのCDN読み込みが失敗した 雛形のindex.htmlは<script src="cdn.jsdelivr.net">のようにGSAPをCDNから読み込む構成になっている。 筆者が自作のGSAPアニメーション(後述)に書き換えてnpx hyperframes@0.8.209 checkを実行したところ、次のエラーでランタイムチェックが失敗した。 Runtime ✗ request_failed: Failed to load npm/gsap@.../dist/gsap.min.js: net::ERR_TUNNEL_CONNECTION_FAILED ✗ page_error: Cannot read properties of undefined (reading 'timeline') npxやnpm自体はnpmレジストリやGoogleのChrome配布サーバーに問題なく到達できていたため、ネットワーク全体が止まっていたわけではない。 ヘッドレスChromeのサブプロセスがjsdelivrへのCONNECTトンネルを張れなかったことが原因とみられ、プロキシ環境やサンドボックス化されたCI環境では同様の失敗が起こりうる構成だと分かった。 対処として、npm pack gsap@3.14.2でGSAP本体を取得し、プロジェクト内のvendor/gsap.min.jsとして同梱、<script src="vendor/gsap.min.js">に変更して外部CDNへの依存を排除した。 この修正後はnpx hyperframes@0.8.209 checkが0エラーで通過した(警告2件は「最初のフレームが背景のみ」「字幕の表示時間がやや短い」という演出上の指摘で、レンダリング自体には影響しない)。 hyperframes自身のドキュメントにも「Only deterministic logic — no network fetches」という注意書きがあり、レンダリング時に外部ネットワークへ依存しない構成はツールが推奨する方向とも一致していた。 自作したアニメーション 1920x1080・30fps・6秒のコンポジションを、GSAPのタイムラインで以下の3シーンとして組んだ。 0.0〜1.6秒: タイトルがぼかし+フェードインで登場 1.4〜4.2秒: 3本の棒グラフがそれぞれ異なる幅・タイミングでpower2.outイージングにより伸びる 4.0〜6.0秒: 数値が0から300までonUpdateコールバックでテキストとしてカウントアップ npx hyperframes@0.8.209 snapshot --at 0.3,2.4,5.0で各シーンを静止画確認し、意図通りに表示されていることを目視で確かめた。 レンダリングと決定性の検証 $ npx hyperframes@0.8.209 render -o renders/run1.mp4 ◇ renders/run1.mp4 270.8 KB · 6.0s video · rendered in 13.3s beginframe capture · software gpu · ... capture 11.1s · encode (during capture) 11.1s 出力は1920x1080・H.264(High profile)・30fps・180フレーム・6.000秒・277,342バイトのMP4になった。 本記事の核心として、同じコマンドをさらに2回実行し(run2.mp4、run3.mp4)、SHA256ハッシュを比較した。 $ sha256sum run1.mp4 run2.mp4 run3.mp4 3af0d4fdf2db52e98fa4056b8d683149031d7981554c5817e393ad2c4d21d06e run1.mp4 3af0d4fdf2db52e98fa4056b8d683149031d7981554c5817e393ad2c4d21d06e run2.mp4 3af0d4fdf2db52e98fa4056b8d683149031d7981554c5817e393ad2c4d21d06e run3.mp4 3回ともバイト単位で完全に一致した。 このレンダリングはデフォルトで2ワーカーによる並列フレームキャプチャを使っているが、並列化によってフレーム順序やタイムスタンプが揺れるような非決定性は見られなかった。 「同じHTML+CSSから毎回同じMP4が出る」という、hyperframesが謳う核心的な主張を、実際に3回レンダリングしてハッシュを突き合わせることで確認できた。 まとめ npx hyperframes browser ensureによるChrome Headless Shellの自動取得、doctor/check/snapshot/renderという一通りのCLIコマンドは、いずれも実際に動作した。 デフォルトテンプレートが外部CDNからGSAPを読み込む構成になっており、プロキシ環境ではヘッドレスChromeからのCDNアクセスが失敗しうる。ライブラリをプロジェクトに同梱してローカル参照に切り替えることで回避できた。 同じコンポジションを3回レンダリングした結果、出力MP4はSHA256が完全一致するバイト単位の決定性を持つことを確認した。 コアのHTML→MP4レンダリングに追加の有料APIキーは不要だった。 出典・ライセンス リポジトリ: heygen-com/hyperframes (Apache-2.0) npmパッケージ: npmjs.com 検証コード・実行ログ・レンダリング済みMP4の全文はGitHubリポジトリのexperiments/day-030を参照。

@gsobregrau Opus 5.5 a pelo o tmb hay skills browser-use/video-use github.com/heygen-com/hyperframes/blob/HEAD/skill…

How to make a product launch video with Claude Code and HyperFrames (HTML to MP4) Most "AI video" tools generate pixels you cannot edit. If you want a product launch video where the text is exactly your copy, the colors are your brand and you can change one word next week, you want the video to be code. HyperFrames from HeyGen does that. A video is an HTML file with a few data attributes for timing and tracks. The renderer seeks every frame in headless Chrome and encodes with FFmpeg, so the same input always gives the same MP4. Because the format is plain HTML, coding agents are good at writing it, and the project ships skills that teach Claude Code, Codex, Cursor and Gemini CLI the production loop. This guide gets you from zero to a rendered launch video with Claude Code, then shows the manual CLI route. Before you start - Node.js 22 or newer - FFmpeg on your PATH - Claude Code (or Codex, Cursor, Gemini CLI or another agent that supports skills) Step 1: install the HyperFrames plugin in Claude Code claude plugin marketplace add heygen-com/hyperframes claude plugin install hyperframes@hyperframes Optional but handy: inside Claude Code run /plugin, pick Marketplaces, then hyperframes, then Enable auto-update. Using Codex, Cursor or another agent instead? Run this once from your video project folder: npx hyperframes skills update That installs the core set: /hyperframes (the render contract, read first), /hyperframes-cli, /hyperframes-registry (about 450 ready made blocks) and /media-use (music, voiceover, images, transcripts). Step 2: ask for the video Load the router with /hyperframes:hyperframes and give the agent your URL and a length. A prompt that works well: > Using HyperFrames, make a 30 to 45 second product launch video from your-site.com. Show me the storyboard before rendering, then render the MP4 and list the scenes and any assets you pulled from the site. Asking for the storyboard first matters. It is cheap to change a scene list and slow to re-render. For a quick test, the README's own example prompt is small enough to finish in minutes: > Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music. Step 3: preview, fix, render npx hyperframes preview # preview in browser with live reload npx hyperframes render # render to MP4 Ask for changes in plain words ("make the title hold one second longer", "swap the green for our brand blue"). Each change is an edit to HTML, so it is precise and reviewable in git. The manual route, no agent npx hyperframes init my-video cd my-video npx hyperframes preview npx hyperframes render Need a transition, a chart or a social overlay? Pull a block from the catalog as editable source: npx hyperframes add flash-through-white # shader transition npx hyperframes add data-chart # animated chart What the HTML looks like A clip is just an element with timing attributes: <video class="clip" data-start="0" data-duration="6" data-track-index="0" src="intro.mp4" muted playsinline></video> Animations use any seekable runtime: GSAP, CSS, Lottie, Three.js, Anime.js or WAAPI. Register a paused GSAP timeline on window.__timelines and the renderer scrubs it frame by frame. Why this beats prompting a video model - Deterministic. Same input, same frames. You can render in CI and diff outputs. - Editable. Next month's price change is a one line HTML edit, not a regeneration. - No React requirement. Remotion is the closest alternative and is excellent, but it is React components plus a bundler; HyperFrames is an index.html that plays as is. It is also Apache 2.0, with no per-render fees. Honest caveats - Rendering is local and CPU heavy; long 1080p videos take a while on a laptop. There is an AWS Lambda path for bigger jobs. - The agent pulls copy and images from your site, so check every claim on screen before you publish. - Some /media-use options (voiceover, avatar, generated video) use HeyGen services; the free local tools cover music, captions and cutouts. Use cases with copy-paste prompts Each page has who it is for, the steps and a prompt you can paste into your coding agent. Use case: Make a product launch video from your website with an AI agent Use case: Turn a pull request into a feature explainer video Use case: Add kinetic captions to a talking-head video Use case: Port an existing Remotion video to HyperFrames HTML --- Get one email every Monday with the week's hottest AI repos and exactly how to use them: subscribe free at dedupedai.com

HyperFrames est un framework open-source sous licence Apache-2.0 qui permet de créer des vidéos MP4 à partir de HTML, CSS, médias et animations, puis de les générer localement ou avec des agents IA ⬇️ heygen-com/hyperframes