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

このSkillで書き出した映像

SNS 投稿カード v1.0.0

X 風の投稿カードが映像の上にスライドインし、いいね、リポスト、表示回数がカウントアップするアニメーション。

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

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

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

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

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 スタイルで投稿をアニメーション表示します。いいねが弾け、数字が伸びていくので、お客さまの声、ローンチの告知、レビューをどんなショットにも重ねられます。

使い方

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

関連ガイド

How to put an animated social post on top of your videoA post on screen is instant social proof. How to animate an X-style post card with climbing likes and lay it over your footage, free, with the Social Post Card block.How to show a Reddit-style review in your videoForum posts read as unfiltered opinions. How to animate a Reddit-style post card over your footage, free, with the Community Post Card block.

似ているSkill

すべて見る