スキル自身の言葉で
検索を起点とするルーティング重視のスキルで、キネティックタイポグラフィ、統計のカウントアップ、チャートヒット、ロゴスティング、ローワーサード、アニメーションマップ、ツイートやウェブページなど、1つの短く、デザイン主導で、ナレーションのないモーショングラフィックを扱います。通常10秒未満、長くても約30秒以内で、MP4または透明オーバーレイにレンダリングします。
アセットファーストかつ再利用ファーストです。最初の分岐点はそのピースが検索を必要とするかどうかで、フォームカテゴリはユーザー提供のコンテンツで動作しasset_needsは空になり、検索駆動のカテゴリは返されたコンテンツタイプに応じてアニメーションします。ビルダーは手作業でギャップを埋める前にカタログブロックを組み立てます。ワークフローは自律的で、確認質問は最大1つまでですが、レンダリングはlint、check、proofスナップショットの後にユーザーゲート方式で行われます。
生成されるもの
- エンベロープ、選択されたカテゴリまたは検索意図、asset_needs、およびブロック・レイアウト・モーション・位置を保持する、ドラフトから最終版へのshot-plan.json。
- HFコントラクトに準拠したcompositions/index.htmlで、window.__timelines上に一時停止したGSAPタイムライン、クリップクラスと安定したid、そして決定論的なtl.seek(0)を備えています。
- proof時刻を確認するための、snapshots/以下にあるコンタクトシートまたはスナップショットシート。
- renders/video.mp4、またはwebmもしくはmov形式でレンダリングする場合は透明オーバーレイ。
仕組み
- 01プロジェクトを初期化する
ステップ0はPROJECT_DIR = videos/<project-name>/を作成し、空のexampleとこのスキルでhyperframes initを実行します。hyperframes.jsonが既に存在する場合は完全にスキップされます。
- 02検索について計画・判断する
最初の分岐点はそのピースが検索を必要とするかどうかで、不要な場合はasset_needs: []のフォームカテゴリ、必要な場合はasset_needs[]に検索クエリを発行します。
- 03必要に応じてアセットを調達する
ステップ2はmedia-useを通じてアセットを固定されたプロジェクトローカルパスと台帳に解決し、asset_needsが空の場合はデザインに直接スキップされます。
- 04手元にあるものに合わせてデザインする
2回目のDirectorパスでは、解決済みのアセットを取り巻くカタログブロックとhyperframes-animationルール、ブループリントを選び、shot planを確定します。
- 05再利用を優先して構成する
ビルダーはnpx hyperframes addでカタログブロックを追加しその場でカスタマイズし、ギャップとasset-fusionのアフォーダンスのみを手作業で作成してcompositions/index.htmlを生成します。
- 06proofスナップショットを取得する
開始状態、シグネチャームーブ、最終ホールドを示すproof時刻を選び、生成されたコンタクトシートまたはスナップショットシートを確認します。