✦ スタジオのおすすめ
Aurelle · 9:16
このSkillで書き出した映像
再生中カード v1.0.0
アートワーク、曲名、進んでいくプログレスバーを載せた Spotify 風の再生中カード。縦型動画にそのまま重ねられます。
まだ評価はありません 0 ダウンロード
- フォーマット
- ショート動画 · 9:16
- 尺
- 0:05
5秒の 9:16 オーバーレイ向けの無料 HyperFrames ブロック。大きな正方形のアートワーク、曲名、アーティスト名、再生とともに進むプログレスバーを載せたすりガラス風の音楽カードがせり上がり、フェードアウトします。曲名、アーティスト、アートワークは HTML で編集します。背景は透過なので、重ねて使えます。
2026年11月3日 更新
得られるもの
- 透過背景の5秒・1080×1920 のカードオーバーレイ
- アートワーク、タイトル、アーティスト、アニメーションするプログレスバー
- 映像に重ねるための手順
向いている用途
- キャンペーンのサウンドトラックやプレイリスト
- ポッドキャストや音楽のプロモーション
- ストーリーズとリール
向いていない用途
- 横型の動画
- 長尺のミュージックビデオ
このSkillについて
依頼の例
/spotify-card Aurelle のキャンペーン曲「Wear the Light」の再生中カードを作って。アートワークはブレスレットの重ね付け、うちのブレスレットのショットに重ねる。
音楽カードは「これがこの動画のサウンドトラック」とひと目で伝えます。再生中カードは、キャンペーンの曲、プレイリスト、ポッドキャストのエピソードを、あなたのアートワーク付きのすっきりしたアニメーションカードに載せます。縦型動画でサウンドをクレジットしたり、プロモーションしたりできます。
使い方
- 依頼：曲名、アーティスト名、アートワーク、そして重ねるショットをエージェントに伝えます。
- 入力：コピーと色をブロックの変数に書き込みます。文字数はレイアウトの想定に近い長さに保ちます。
- レンダー：
npx hyperframes renderで下書きをレンダーし、いくつかのフレームを確認してから最終版の MP4 を書き出します。 - 再利用：変数は小さな JSON ファイル1つにまとまっているので、次のバージョンもレンダー1回で済みます。
コツ
- アートワークは幅800px以上の正方形を使いましょう。
- タイトルは数語に収めます。大きく表示されます。
- カードは透過背景なので、アルファチャンネル付きでレンダーして自分の映像や写真に重ねます。そのための2つのコマンドは SKILL.md に載っています。
- サンプルではプラットフォームのロゴを、シンプルな「Now playing」ラベルに差し替えています。
オープンソース
これは HyperFrames のレジストリブロックです。HeyGen と HyperFrames のコントリビューター（heygen-com/hyperframes）が作り、Apache License 2.0 で公開しています。ダウンロードはアセット込みのブロックに Reelity が書いた SKILL.md を添えたもので、エージェントが中身の埋め方とレンダー方法を把握できます。HyperFrames 本体は npm から実行されます。
始める前に必要なもの
- 用意するもの
- 曲名またはエピソード名、アーティスト名、正方形のアートワーク、重ねるショット。
- 依存関係
- Node.js 22 以降 — 必須 · FFmpeg — 必須
- 外部コスト
- ありません。HyperFrames は無料のオープンソースで、手元のマシンでレンダーします。
- 最終テスト
- v1.0.0 —
ユーザーレビュー
まだレビューはありません。インストールして最初に評価しましょう。
よくある質問
色は変えられますか？
はい。カードと文字の色は HTML 内のシンプルな CSS です。
Spotify のロゴは表示されますか？
パッケージには元の小さなロゴが残っています。サンプルでは「Now playing」ラベルに差し替えており、エージェントにも同じことができます。
なぜ無料なのですか？
HeyGen と HyperFrames のコントリビューターによるオープンソースの HyperFrames ブロックです。手を加えずに掲載し、エージェントが使えるよう SKILL.md を添え、自社ブランド Aurelle で作ったサンプルを付けています。
