Hipson47/Hipson

Hipson HyperFrames Video

このスキルは、ユーザーが動画合成、ウェブサイトから動画へのワークフロー、ローンチ動画、製品紹介、アニメーション事例紹介、ピッチ動画、ソーシャルショート、または HyperFrames を使用した MP4 形式の出力を必要とする場合に使用します。

このワークフローを通常のウェブ UI デザインに統合しないでください。HyperFrames の作業は、独立した動画合成パスです。

HyperFrames とは

HyperFrames は、レンダリングされた動画のための決定論的な HTML 構成ワークフローです。構成はプレーンな HTML/CSS/JavaScript で記述され、ローカルでプレビューされ、利用可能な場合は Node.js と FFmpeg ツールを使用して動画にレンダリングされます。

ウェブのようなレイアウトを時間指定の動画にする必要がある場合に使用します：製品ローンチ、機能説明、チェンジログの要約、事例紹介のアニメーション、ピッチアセット、ソーシャルショート。

使用すべきでない場合

• 通常の静的 UI デザイン。
• バックエンド、API、データベース、またはセキュリティのみのタスク。
• 純粋な React コンポーネントの実装。
• 単発の画像生成。
• ユーザーが動画、タイムライン、レンダリング、MP4、または HyperFrames を要求していないタスク。

コールドスタート

ユーザーが動画についてのみ説明する場合、以下を質問するか推定します：

• オーディエンスと目標；
• プラットフォームとアスペクト比；
• 長さと FPS；
• ソースコピー；
• ビジュアルリファレンスまたはブランドの制約；
• 望ましいムード；
• オーディオあり、または無音/キャプション優先の配信；
• 出力形式と期限。

その後、実装の前に動画概要を作成します。

ウォームスタート

ユーザーが URL、ページ、PDF、トランスクリプト、チェンジログ、CSV、またはコピーを提供する場合：

1. ストーリーの要点を抽出します。
2. テキスト、製品 UI、グラフ、スクリーンショット、またはモーションカードとして表示できるものを選択します。
3. タイムスタンプ付きのシーンを定義します。
4. ローカルに配置、生成、エクスポート、または省略する必要のあるアセットを特定します。
5. HyperFrames 実装概要を作成します。

コア HyperFrames ルール

• ユーザーが明示的にフレームワークを要求しない限り、React や Vue ではなく、プレーンな HTML 構成を使用します。
• ルート構成要素には data-composition-id、data-width、data-height を含める必要があります。
• 時間指定要素は、class="clip"、data-start、data-duration、data-track-index を使用します。
• GSAP タイムラインは一時停止され、window.__timelines に登録する必要があります。
• Math.random() と非同期タイムライン設定を避けます。
• 動画要素はミュートにし、オーディオ要素は別にします。
• ライブネットワークデータや実行時ランダム性よりも、決定論的なレンダリングを優先します。
• ローカルレンダリングには Node.js 22+ と FFmpeg が必要です。
• 利用可能な場合は、プレビュー、レンダリング、および lint コマンドを使用します。

動画概要フォーマット

# HyperFrames Video Brief

## 目標
## ソース資料
## フォーマット
アスペクト比、長さ、FPS、プラットフォーム。

## クリエイティブディレクション
ムード、ビジュアルスタイル、タイポグラフィ、色、モーション、オーディオ。

## シーン内訳
シーンごとのタイミング、ビジュアル、キャプション、モーション、オーディオ。

## HyperFrames 実装ノート
HTML 構造、データ属性、GSAP タイムライン、アセット、コマンド。

## Codex 概要
具体的な実装タスク。

## QA チェックリスト
タイミング、キャプション、コントラスト、オーディオ、レンダリング品質、決定論性。

Codex 実装概要の要件

以下を含めます：

• コンポジション ID；
• 幅、高さ、FPS、長さ；
• 対象フォルダとファイル名；
• シーンタイミングテーブル；
• 必要なアセットとフォールバックアセット；
• テキスト/キャプションのソース；
• 正確なアニメーション/タイムラインの期待値；
• プレビュー、lint、レンダリングコマンド；
• ローカル出力パス（通常 git で無視）；
• 決定論的レンダリングのための QA チェックリスト。

QA チェックリスト

• ルート要素が必要なコンポジションデータ属性を持っている。
• すべての時間指定要素が決定論的な data-start、data-duration、data-track-index を持っている。
• タイムラインは一時停止され、window.__timelines に登録されている。
• Math.random() または非同期設定が最終的なタイミングに影響を与えない。
• 動画要素はミュートされ、オーディオは分離されている。
• キャプションは対象プラットフォームのサイズで読みやすい。
• コントラストが十分である。
• タイミングがシーン内訳と一致している。
• レンダリング出力でドロップフレーム、クリッピング、不適切なクロップ、オーディオ同期の問題がないか確認されている。
• 生成されたメディアは、意図的に承認されない限り git の管理外に置かれる。

リポジトリ衛生管理

hyperframes-output/、exports/、または tmp/ などのローカル出力フォルダをレンダリングと生成アセットに使用します。ユーザーがソースアセットとして明示的に承認しない限り、大きな生成された MP4、WebM、MOV、WAV、MP3、SRT、または VTT ファイルをコミットしないでください。