Remotionのプレビュー画面で、そのまま動画を編集できるパネルを作ってみました!*゚。 (n´v`n) 。゚*
👇🏻動画みた方が早いかも
今まではAntigravityに依頼してプレビュー表示を待って…という感じでしたが、
この新パネル『Live-Director』を使うと、画面を見ながらポチポチするだけで動画がどんどん編集できちゃいます!✨
🎨 Live-Directorでできること
1. リアルタイム・シンクロ
パネルで行った編集は、プレビュー画面にその場で反映されます!
2. 歌詞の書き換え
パネルの文字を打ち変えるだけで、映像内のテキストが即座に変わります。
3. テロップアニメーションの変更
「Slide」「Pop」「Zoom」など、好きな動きをドロップダウンから選ぶだけ!
4. 画面エフェクトの切り替え
背景の光り方や画面の揺れなど、演出もパネルで自由に選べます。
5. タイミング調整(フレーム単位)
歌詞の「開始」と「終了」の時間を0.1秒単位で直接編集できます!⌚✨
🌎 エージェント用の「設計図」
もちろんあなたのエージェント(Antigravityなど)で使えます!
この手順書(Blueprint)を渡すせば、同じような編集環境を構築してくれるはず!👇✨
📦 Universal Blueprintはこちら
[Live-Director_Specification]
# Live-Director: ユニバーサル仕様書 [v1.1]
このドキュメントは、Antigravityエージェントが「Live-Director(リアルタイム・双方向MV制作環境)」をあらゆるプロジェクトで再現するための**マスター・ブループリント**です。
この仕様書をAntigravityに読み込ませることで、エージェントは必要なコードの書き換え(ステート・リフトアップ、エフェクト・ハブの構築など)を自律的に実行できます。
---
## 🏛️ コア・アーキテクチャ: Live-Connect
ゼロ遅延の視覚的フィードバックを実現するために、以下の**ステート・リフトアップ(State Lifting)パターン**を適用します。
```mermaid
graph TD
Data[lyrics.ts] -->|初期プロップス| Root[Root/MainComposition]
Root -->|State: lyrics| Studio[Live-Director Panel]
Root -->|Prop: lyrics| Preview[MV Renderer]
Studio -->|コールバック: onLyricsChange| Root
Root -->|再レンダリング| Preview
```
### 1. ルート・コンポーネント (`MainComposition.tsx`)
- **状態の移行**: 静的なプロップスに依存せず、`useState` を使ってデータをラップします。
- **プロバイダー**: 現在の状態と `setLyrics` 関数を `Live-Director` オーバーレイに渡します。他のサブコンポーネント(シークエンスやオーバーレイ)もこのライブ状態を参照するように修正します。
### 2. スタジオ・パネル (`VisualEditorOverlay.tsx`)
- **即時同期**: 歌詞テキスト、エフェクト選択、時間設定の変更(`onChange`)が発生した瞬間、即座にコールバックを叩きルートに通知します。
- **時間制御(Time-Precise Editing)**: START(開始時間)と END(終了時間)の数値を直接編集できるUIを実装します。ENDの変更は `duration` の自動計算に変換されます。
---
## 🎭 エフェクト・ハブ(Effects Hub)戦略
「Live-Director」の表現力は、利用可能なアニメーション・ライブラリに依存します。
### `_common/effects` のハンドリング
プロジェクト間でエフェクトを共有するための標準的なディレクトリ構造です。
1. **依存関係の検知**: エージェントはまず `_common/effects` ディレクトリの有無を確認します。
2. **フォールバック・バンドル**: 共有ディレクトリがない場合、エージェントは標準アニメーション(Slide, Pop, Zoom, Shake, Blur, Glitch等)を `HyperKineticText` コンポーネント内に直接書き込み(インライン化)、環境を選ばず即座に動作するようにします。
### 推奨エフェクト・セット
- **Character FX**: `Pop`, `Slide`, `Shake`, `Zoom`, `Blur`, `Glitch`, `Bounce`, `Neon`, `Glow`.
- **Screen FX**: `Flash`, `Bloom`, `DustCloud`, `HardKick`, `HoneyGlow`.
---
## 📦 エージェントへの構築命令
この仕様書を受け取ったAntigravityは、以下のステップを自律的に実行してください:
1. **プロジェクト分析**: CompositionとOverlayの親子関係を把握し、データの流れを特定する。
2. **ステート・リフトアップ**: `MainComposition.tsx` で `lyrics` ステートを宣言し、各コンポーネントを「ライブ状態」に接続する。
3. **UI実装**: Overlayパネルに「Live-Director」ブランドを適用し、リアルタイム編集UI(時間編集入力、エフェクトドロップダウン)を構築する。
4. **互換性確保**: エフェクトが欠落している場合は、本仕様書の「フォールバック・バンドル」に従い、標準アニメーションをコード内に直接注入する。
---
*Created by Kashiko - Powered by Antigravity*