プレミアム動画Skillがすべて使える、ひとつのプラン。いつでも解約できます。プランを見る
Maison Vey · 16:9

このSkillで書き出した映像

進捗スタッツカード v1.0.0

ラベルの横で大きな数字がカウントアップし、細いプログレストラックが値まで満ちて、キャプションがフェードインします。

まだ評価はありません 0 ダウンロード
フォーマット
動画 · 16:9
尺
0:07

無料 アカウント登録で無料

ログインしてダウンロード

これをエージェントに貼り付けてください。必要ならCLIを接続し、Skillをインストールします。

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」、うちの香水のショットに重ねる。

強い数字がひとつあれば、広告全体を引っぱれます。進捗スタッツカードは、その数字をカウントアップし、最大値にどれだけ近いかを示し、ラベルとキャプションを添えます。商品ショットに重ねられるほどすっきりした仕上がりです。

使い方

  1. 依頼:数字、そのサフィックスと最大値、短いラベル、キャプションをエージェントに伝えます。
  2. 入力:コピーと色をブロックの変数に書き込みます。文字数はレイアウトの想定に近い長さに保ちます。
  3. レンダー:npx hyperframes render で下書きをレンダーし、いくつかのフレームを確認してから最終版の MP4 を書き出します。
  4. 再利用:変数は小さな 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 で作ったサンプルを付けています。

関連ガイド

How to make a money counter animation for a sales milestoneA number that counts up and explodes in green is the most direct way to celebrate a result. How to make one with sound, free, with the Money Counter block.How to make an animated statistic for an adOne strong number can carry an ad. How to count it up with a label, progress track and caption, free, with the Progress Stat Card block.

似ているSkill

すべて見る