
このSkillで書き出した映像
Cuboid カードカルーセル v1.0.0
ベベルのついた 3D カードの列が波に乗って進み、1枚が抜け出してカメラのほうを向き、静止します。
- フォーマット
- 動画 · 16:9
- 尺
- 0:07
短いコンテンツカルーセル向けの無料の HyperFrames ブロック。カテゴリ、タイトル、2つの小さなピルを載せた最大12枚の直方体カードが、ライティングされた 3D シーンを波に乗って流れます。ヒーローカードが列から離れ、回転して正面で止まります。カードは1つの JSON 変数で設定し、ライト、マテリアル、カメラも変数です。
2026年11月2日 更新
得られるもの
- ライティングされた 3D カードの波を使った6.7秒・1920×1080 の MP4
- 1つの JSON リストから最大12枚のカード
- 列から抜け出して静止するヒーローカード
向いている用途
- 新作の発売やコレクションのティザー
- ロードマップ、タスクリスト、機能一覧
- イベントのアジェンダやラインナップ
向いていない用途
- カードへの写真の掲載(テキスト用です)
- 長い読み物。各カードに載るのは数語だけです
このSkillについて
/cuboid-carousel うちのハンドバッグの新作で、カード8枚のキューボイドカルーセルを作って。カテゴリは「Vael Cerise」、タイトルは「Cherry leather tote」「Brass hardware」「Room for a laptop」など、ピルは在庫と価格。最後は「The Cerise tote is here」で締めて。
重みのあるカルーセル。Cuboid Carousel はカードを本物のライティングと影のついたベベル付きのブロックとして作り、進む波の上に並べ、手持ち風のカメラでその横を通り過ぎます。そして選んだヒーローカードが列から浮き上がり、くるりと回って正面を向き、締めの一拍を飾ります。
使い方
- 依頼:カルーセルの内容を伝えます。項目ごとにカード1枚、それぞれにカテゴリ、タイトル、ステータスと日付や価格などのピル2つです。
- 準備:ブロックを HyperFrames プロジェクトに置き、コピーと色をレンダー変数として入れます。
- プレビュー:いくつかのフレームを確認してから、
npx hyperframes renderで 1920×1080 の MP4 を書き出します。 - 再利用:変数は1つの JSON ファイルにまとまっているので、見出しやブランドを変えるのもレンダー1回で済みます。
コツ
- カードのタイトルは2〜5語に。小さな面に載ります。
- 最後に見せたいカードをヒーローカードに選びましょう。
- 暖色のキーライトとボトムライトはダークなカードを引き立てます。背景はカードより暗くしてください。
- 6.7秒なのでフィードできれいにループします。長めにしたいときは2回続けてレンダーします。
オープンソース
これは HyperFrames のレジストリブロックです。HeyGen と HyperFrames のコントリビューター(heygen-com/hyperframes)が作り、Apache License 2.0 で公開しています。ダウンロードはアセット込みですぐにレンダーできるブロックで、HyperFrames 本体は npm から実行されます。
始める前に必要なもの
- 用意するもの
- カードのリスト。それぞれにカテゴリ、短いタイトル、ピル2つ。
- 依存関係
- Node.js 22 以降 — 必須 · FFmpeg — 必須
- 外部コスト
- ありません。HyperFrames は無料のオープンソースで、手元のマシンでレンダーします。
- 最終テスト
- v1.0.0 —
ユーザーレビュー
まだレビューはありません。インストールして最初に評価しましょう。
よくある質問
カードは何枚まで使えますか?
1〜12枚です。cards 変数に JSON リストで渡し、どれをヒーローにするか選びます。
ブロックの見た目は変えられますか?
変えられます。サイズ、厚み、角の丸み、ベベル、本体の色、粗さ、金属感、すべてのライトが変数です。
なぜ無料なのですか?
HeyGen と HyperFrames のコントリビューターによるオープンソースの Skill です。手を加えずに掲載し、自社ブランド Vael で動かしたサンプルを添えています。






