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

このSkillで書き出した映像

分解レイヤースタック v1.0.0

4枚のアイソメトリックなプレートが分解し、各レイヤーの横にラベルが付いて静止、そしてひとつの積層に戻ります。

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

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

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

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

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秒。もとはソフトウェアのアーキテクチャ向けに作られましたが、シューズ、マットレス、スキンケアのステップ、料金プランにもぴったりです。

使い方

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

関連ガイド

How to make a bar chart race video from a spreadsheetRankings that change over time make some of the most watched data videos. How to turn a small table into a bar chart race, free, with the Bar Chart Race block.How to make an exploded view animation of your productShowing what's inside a product builds trust in seconds. How to make a labelled exploded view, free, with the Exploded Layer Stack block.How to turn product photos into a 3D flythrough videoA handful of still photos can become a moving, cinematic shot. How to make a 3D corridor flythrough of your photos, free, with the Gallery Tunnel block.

似ているSkill

すべて見る