
このSkillで書き出した映像
分解レイヤースタック v1.0.0
4枚のアイソメトリックなプレートが分解し、各レイヤーの横にラベルが付いて静止、そしてひとつの積層に戻ります。
- フォーマット
- 動画 · 16:9
- 尺
- 0:05
5秒の「中身はこうなっている」を見せる無料の HyperFrames ブロック。4枚のアイソメトリックなプレートが上下に離れ、それぞれに番号付きのラベルと専用のイラストが付き、レイヤーがいったん静止してからひとつの積層に戻ります。タイトル、4つのレイヤー名、アクセント、背景は変数です。
2026年11月3日 更新
得られるもの
- 5秒・1920×1080 の MP4
- 分解して積み直る、ラベル付きの4つのアイソメトリックレイヤー
- タイトル、レイヤー名、2色の変数
向いている用途
- 「中身はこうなっている」を見せる商品紹介
- アーキテクチャ図やシステム図
- 機能説明やオンボーディング
向いていない用途
- 実際の製品レイヤーの写真
- 5つ以上のレイヤー
このSkillについて
/exploded-stack 「Inside the Halden Solace」というタイトルで分解スタックを作って。レイヤーは Knit upper、Foam midsole、Carbon plate、Grip outsole。アクセントは #E2552B、背景は温かみのあるオフホワイト。
何でできているかを見せると、信頼はすぐに生まれます。Exploded Layer Stack は製品やシステムをラベル付きの4つのレイヤーに分解し、また組み上げます。所要時間は5秒。もとはソフトウェアのアーキテクチャ向けに作られましたが、シューズ、マットレス、スキンケアのステップ、料金プランにもぴったりです。
使い方
- 依頼:タイトルと、上から順に4つのレイヤー名、アクセントカラーをエージェントに伝えます。
- 入力:コピーと色をブロックの変数に書き込みます。文字数はレイアウトの想定に近い長さに保ちます。
- レンダー:
npx hyperframes renderで下書きをレンダーし、いくつかのフレームを確認してから最終版の MP4 を書き出します。 - 再利用:変数は小さな JSON ファイル1つにまとまっているので、次のバージョンもレンダー1回で済みます。
コツ
- レイヤー名はそれぞれ2〜3語にしましょう。
- 製品の実際の構造どおりに、上から下へ並べます。
- アクセントにはブランドカラーを。アクティブなレイヤーが光ります。
- 長めの解説動画の「仕組み」パートに差し込むのもおすすめです。
オープンソース
これは HyperFrames のレジストリブロックです。HeyGen と HyperFrames のコントリビューター(heygen-com/hyperframes)が作り、Apache License 2.0 で公開しています。ダウンロードはアセット込みのブロックに Reelity が書いた SKILL.md を添えたもので、エージェントが中身の埋め方とレンダー方法を把握できます。HyperFrames 本体は npm から実行されます。
始める前に必要なもの
- 用意するもの
- タイトル、4つのレイヤー名、アクセントカラー。
- 依存関係
- Node.js 22 以降 — 必須 · FFmpeg — 必須
- 外部コスト
- ありません。HyperFrames は無料のオープンソースで、手元のマシンでレンダーします。
- 最終テスト
- v1.0.0 —
ユーザーレビュー
まだレビューはありません。インストールして最初に評価しましょう。
よくある質問
5つ以上のレイヤーは使えますか?
ブロックのレイヤーは4つです。それ以上なら、エージェントがレイヤーを変えて2回レンダーし、つなげることができます。
プレートに商品写真を表示できますか?
いいえ。プレートはシンプルなイラストで、意味はラベルが伝えます。
なぜ無料なのですか?
HeyGen と HyperFrames のコントリビューターによるオープンソースの HyperFrames ブロックです。手を加えずに掲載し、エージェントが使えるよう SKILL.md を添え、自社ブランド Halden Solace で作ったサンプルを付けています。






