無料
Solenne · 16:9
このSkillで書き出した映像
Orbit 機能カード v1.0.0
1枚の機能カードが登場し、回転するドットの球体の周りを Blender のなめらかなカメラパスで一周して退場。すべて10秒で。
まだ評価はありません 0 ダウンロード
- フォーマット
- 動画 · 16:9
- 尺
- 0:10
プロダクトの機能1つを 3D の見せ場に変える無料の HyperFrames ブロック。円形にくり抜かれたダークなカードがドットの球体を縁取ります。Blender から書き出したカメラの動きに乗って、右から入り、漂い、球体の周りを一周して左へ抜けます。機能名、説明、アクセントカラー、周回角度は変数です。
2026年11月2日 更新
得られるもの
- 3D の機能カードを使った10秒・1920×1080 の MP4
- Blender から書き出し、フレーム単位で正確に再生されるカメラの動き
- タイトル、説明、アクセント、周回角度の変数
向いている用途
- アプリや SaaS のローンチでの機能紹介
- 変更履歴やリリースノートのクリップ
- プロダクトツアーへの差し込み
向いていない用途
- 1枚のカードに複数の機能を載せること
- 実際のアプリのスクリーンショット（UI ではなくテキストを表示します）
このSkillについて
依頼の例
/orbit-card うちのスマートホームアプリの新機能でオービットカードを作って。タイトルは「Evening wind-down」、説明は「Lights dim, blinds close and the heat drops at sunset.」、アクセントは #E8735A。
どの機能にも、それぞれの見せ場を。Orbit Card は1つの機能を1枚のカードに載せます。機能名、一文の説明、アクセントのラインが、回転するドットの球体をのぞかせる丸い窓を囲みます。カメラパスは Blender のリグから来ているので、登場、浮遊、一周、退場が手付けのアニメーションではなく、撮影したように感じられます。
使い方
- 依頼：カードの文言を伝えます。機能名、一文の説明、アクセントカラーです。
- 準備：ブロックを HyperFrames プロジェクトに置き、コピーと色をレンダー変数として入れます。
- プレビュー：いくつかのフレームを確認してから、
npx hyperframes renderで 1920×1080 の MP4 を書き出します。 - 再利用：変数は1つの JSON ファイルにまとまっているので、見出しやブランドを変えるのもレンダー1回で済みます。
コツ
- 1枚に機能は1つ。機能一覧にしたいときは、機能ごとに1回ずつレンダーしてつなげます。
- 説明は12語以内に収めましょう。カード上では小さく表示されます。
- アクセントはブランドパレットから選びます。ラインと球体の光の色になります。
- 周回を180°にするとすばやく、720°にすると華やかに回ります。
オープンソース
これは HyperFrames のレジストリブロックです。HeyGen と HyperFrames のコントリビューター（heygen-com/hyperframes）が作り、Apache License 2.0 で公開しています。ダウンロードはアセット込みですぐにレンダーできるブロックで、HyperFrames 本体は npm から実行されます。
始める前に必要なもの
- 用意するもの
- 機能名、それを説明する短い一文、アクセントカラー。
- 依存関係
- Node.js 22 以降 — 必須 · FFmpeg — 必須
- 外部コスト
- ありません。HyperFrames は無料のオープンソースで、手元のマシンでレンダーします。
- 最終テスト
- v1.0.0 —
ユーザーレビュー
まだレビューはありません。インストールして最初に評価しましょう。
よくある質問
カードにスクリーンショットを表示できますか？
そのままではできません。カードは球体の周りにタイトルと一文を置く作りです。エージェントが HTML を編集して画像を足すこともできますが、ブロックは短いテキスト向けに設計されています。
機能一覧はどう作りますか？
機能ごとに変数を変えてブロックを1回ずつレンダーし、クリップをつなげます。どれも空の画面で始まって終わるので、きれいにつながります。
なぜ無料なのですか？
HeyGen と HyperFrames のコントリビューターによるオープンソースの Skill です。手を加えずに掲載し、自社ブランド Solenne で動かしたサンプルを添えています。
