
このSkillで書き出した映像
進捗スタッツカード v1.0.0
ラベルの横で大きな数字がカウントアップし、細いプログレストラックが値まで満ちて、キャプションがフェードインします。
- フォーマット
- 動画 · 16:9
- 尺
- 0:07
7秒のスタッツシーン向けの無料 HyperFrames ブロック。大きな数字が % などのサフィックス付きで値までカウントアップし、横にラベルが並び、細いアクセントカラーのトラックが最大値に対する割合まで満ちて、下に短いキャプションが現れます。値、サフィックス、最大値、ラベル、キャプション、色は HTML 内の小さな設定で指定します。背景は透過です。
2026年11月3日 更新
得られるもの
- 透過背景の7秒・1920×1080 のスタッツ
- カウントアップする数字、ラベル、プログレストラック、キャプション
- 値を指定する小さな設定ブロック
向いている用途
- アンケートやレビューの結果
- 節目や目標
- 数字で示す商品の訴求
向いていない用途
- 複数の数字を同時に見せること
- 文脈のない数字
このSkillについて
/mk-progress-stat 進捗スタッツを作って。94%「Would wear it again」、キャプションは「Maison Vey Ambre Nuit, blind test of 200 people」、うちの香水のショットに重ねる。
強い数字がひとつあれば、広告全体を引っぱれます。進捗スタッツカードは、その数字をカウントアップし、最大値にどれだけ近いかを示し、ラベルとキャプションを添えます。商品ショットに重ねられるほどすっきりした仕上がりです。
使い方
- 依頼:数字、そのサフィックスと最大値、短いラベル、キャプションをエージェントに伝えます。
- 入力:コピーと色をブロックの変数に書き込みます。文字数はレイアウトの想定に近い長さに保ちます。
- レンダー:
npx hyperframes renderで下書きをレンダーし、いくつかのフレームを確認してから最終版の MP4 を書き出します。 - 再利用:変数は小さな JSON ファイル1つにまとまっているので、次のバージョンもレンダー1回で済みます。
コツ
- 「94% がまた買いたい」のように、意味がはっきりした数字を選びましょう。
- ラベルは3〜4語に収めます。
- 背景は透過なので、アルファチャンネル付きでレンダーして自分の映像や写真、単色の背景に重ねます。そのための2つのコマンドは SKILL.md に載っています。
- 裏付けのある実際の数字を使いましょう。
オープンソース
これは HyperFrames のレジストリブロックです。HeyGen と HyperFrames のコントリビューター(heygen-com/hyperframes)が作り、Apache License 2.0 で公開しています。ダウンロードはアセット込みのブロックに Reelity が書いた SKILL.md を添えたもので、エージェントが中身の埋め方とレンダー方法を把握できます。HyperFrames 本体は npm から実行されます。
始める前に必要なもの
- 用意するもの
- 数字、その最大値、短いラベル、キャプション。
- 依存関係
- Node.js 22 以降 — 必須 · FFmpeg — 必須
- 外部コスト
- ありません。HyperFrames は無料のオープンソースで、手元のマシンでレンダーします。
- 最終テスト
- v1.0.0 —
ユーザーレビュー
まだレビューはありません。インストールして最初に評価しましょう。
よくある質問
パーセンテージ以外の数字にもできますか?
はい。サフィックスを K や x、または空にして、最大値もそれに合わせて設定します。
無地の背景にも置けますか?
はい。ボードにも映像にも合うよう、明るい文字と暗い文字のスタイルがあります。
なぜ無料なのですか?
HeyGen と HyperFrames のコントリビューターによるオープンソースの HyperFrames ブロックです。手を加えずに掲載し、エージェントが使えるよう SKILL.md を添え、自社ブランド Maison Vey で作ったサンプルを付けています。






