
このSkillで書き出した映像
SNS 投稿カード v1.0.0
X 風の投稿カードが映像の上にスライドインし、いいね、リポスト、表示回数がカウントアップするアニメーション。
- フォーマット
- 動画 · 16:9
- 尺
- 0:05
5秒の投稿オーバーレイ向けの無料 HyperFrames ブロック。アバター、名前、ハンドル、認証バッジ、投稿文、タイムスタンプ、エンゲージメントバーを備えたダークな投稿カードがスライドインし、いいねがピンクに変わって数字が伸び、フェードアウトします。名前、ハンドル、本文、数字は HTML で編集します。背景は透過なので、映像に重ねられます。
2026年11月3日 更新
得られるもの
- 透過背景の5秒の投稿カードオーバーレイ
- アニメーションするいいねと、伸びていくエンゲージメントの数字
- 映像に重ねるための手順
向いている用途
- お客さまの声やメディア掲載の引用
- 動画内でのローンチ告知
- 投稿を引用する解説動画
向いていない用途
- 他人の投稿を許可なく見せること
- 単体でのフルスクリーン広告
このSkillについて
/x-post Maison Vey(@maisonvey)の SNS 投稿カードを作って。本文は「Ambre Nuit is here. Amber, smoked vanilla and a little night air, in a bottle you will want to keep on the shelf. #AmbreNuit」、うちの香水のショットに重ねる。
優れた投稿を画面で引用すれば、ひと目でわかる社会的証明になります。SNS 投稿カードは、おなじみの X スタイルで投稿をアニメーション表示します。いいねが弾け、数字が伸びていくので、お客さまの声、ローンチの告知、レビューをどんなショットにも重ねられます。
使い方
- 依頼:名前、ハンドル、投稿文、エンゲージメントの数字、そして重ねるショットをエージェントに伝えます。
- 入力:コピーと色をブロックの変数に書き込みます。文字数はレイアウトの想定に近い長さに保ちます。
- レンダー:
npx hyperframes renderで下書きをレンダーし、いくつかのフレームを確認してから最終版の MP4 を書き出します。 - 再利用:変数は小さな JSON ファイル1つにまとまっているので、次のバージョンもレンダー1回で済みます。
コツ
- 投稿は140文字程度までに収めると、3行に収まります。
- アバターには正方形の画像を使います。
- カードは透過背景なので、アルファチャンネル付きでレンダーして自分の映像や写真に重ねます。そのための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 —
ユーザーレビュー
まだレビューはありません。インストールして最初に評価しましょう。
よくある質問
数字は変えられますか?
はい。返信、リポスト、いいね、表示回数は HTML 内のただのテキストです。
X のロゴは表示しなければいけませんか?
いいえ。ロゴは HTML 内の小さな要素ひとつです。サンプルでは外して中立的なカードにしています。
なぜ無料なのですか?
HeyGen と HyperFrames のコントリビューターによるオープンソースの HyperFrames ブロックです。手を加えずに掲載し、エージェントが使えるよう SKILL.md を添え、自社ブランド Maison Vey で作ったサンプルを付けています。






