無料
Halden Solace · 16:9
このSkillで書き出した映像
Code Slice Hero タイトル v1.0.0
タイルで組んだ大きな見出しが、奥行きの波に合わせて1枚ずつ裏返り、背後の2つ目の見出しが現れます。
まだ評価はありません 0 ダウンロード
- フォーマット
- 動画 · 16:9
- 尺
- 0:08
8秒のタイトルカード向けの無料の HyperFrames ブロック。表の見出しはセルのグリッドに描かれ、やわらかな奥行きの波が横切ると、各セルが小さく弾みながら影を落として裏返り、裏の見出しが残ります。2行の文言、波の向き、速さ、セルサイズ、色はすべて変数です。
2026年11月2日 更新
得られるもの
- 8秒・1920×1080 の MP4 タイトルカード
- タイルごとに反転して切り替わる2つの見出し
- 波、タイミング、セルサイズ、影、色の変数
向いている用途
- ローンチのオープナーとエンドカード
- SNS 投稿向けの主張と答えの2行
- リブランドやビフォーアフターのメッセージ
向いていない用途
- 長い文章や段落
- タイトルに商品映像を入れたい動画
このSkillについて
依頼の例
/code-slice-hero うちのランニングシューズのローンチに code slice hero ブロックを使って。表の見出しは「RUN SOFT.」、裏の見出しは「RUN FAR.」、波は左から右へ。1080p でレンダーして。
短い2行を、きれいな1回の反転で。Code Slice Hero は1つ目の見出しを正方形のセルのグリッドに描きます。波が画面を横切り、通過するセルを持ち上げて傾け、すべてのセルが裏返って2つ目の見出しの対応する部分を見せます。いちばん映えるのは、同じくらいの長さの力強い2行です。主張とその答え、商品名と約束、「before」と「after」など。
使い方
- 依頼：タイトルの文言を伝えます。表の見出しと、反転して現れる見出しです。
- 準備：ブロックを HyperFrames プロジェクトに置き、コピーと色をレンダー変数として入れます。
- プレビュー：いくつかのフレームを確認してから、
npx hyperframes renderで 1920×1080 の MP4 を書き出します。 - 再利用：変数は1つの JSON ファイルにまとまっているので、見出しやブランドを変えるのもレンダー1回で済みます。
コツ
- 2行とも短く（1〜3語）、長さをそろえると、反転がひとつの動きとして読めます。
- 波の向きは、編集で次に来るシーンの読む方向に合わせて変えましょう。
- セルを小さくすると細かくデジタルな反転に、大きくするとポスターのような力強い反転になります。
- 長めのローンチ動画のオープニングやエンドカードに使えます。
オープンソース
これは HyperFrames のレジストリブロックです。HeyGen と HyperFrames のコントリビューター（heygen-com/hyperframes）が作り、Apache License 2.0 で公開しています。ダウンロードはアセット込みですぐにレンダーできるブロックで、HyperFrames 本体は npm から実行されます。
始める前に必要なもの
- 用意するもの
- 短い見出しを2つ。お好みでブランドカラーも。
- 依存関係
- Node.js 22 以降 — 必須 · FFmpeg — 必須
- 外部コスト
- ありません。HyperFrames は無料のオープンソースで、手元のマシンでレンダーします。
- 最終テスト
- v1.0.0 —
ユーザーレビュー
まだレビューはありません。インストールして最初に評価しましょう。
よくある質問
自分のフォントは使えますか？
使えます。ブロックにはオープンソースの Geist が入っています。好きな Web フォントに差し替え、行が画面に収まるようフォントサイズの変数を調整してください。
右から左へ反転させられますか？
できます。向きは変数で、波の長さ、イージング、反転の長さも変数です。
なぜ無料なのですか？
HeyGen と HyperFrames のコントリビューターによるオープンソースの Skill です。手を加えずに掲載し、自社ブランド Halden Solace で動かしたサンプルを添えています。
