Amartileyton/autovideo

記事ハイライト

remotion-best-practices、motion-graphics、cinematic-camera と組み合わせて、ニュース、リリース、トレンド、記事の証明など、ターミナルが不自然に感じられる場面で使用します。

必須の事前確認

コーディング前に、不足している決定事項を必ず質問します：

どのフォーマットにしますか？4:3 ハーフスクリーンの Instagram インサート、または 9:16 フルスクリーンの Instagram？背景は、ウォームライト、クリーンダーク、ライトグリッド、ダークグリッドのどれにしますか？

• 4:3 インサート：1440×1080。9:16 フレームの約半分で読めるように設計。
• 9:16 フルスクリーン：1080×1920。キャプション/インターフェースゾーンを考慮。
• 明示的に要求された場合のみ 16:9 を使用。
• ユーザーが背景を委任した場合、ウォームライトを使用。

記事の紙面は、クリーンダークまたはダークグリッドのシーン上でも明るいままにできます。全体の構成を黙って暗くしないでください。

絶対的なビジュアル禁止

ネオン、グロー、ブルーム、発光するエッジ、色付きの影、シアン-パープルのグラデーション、グラデーションオーブ、放射状の色のウォッシュ、ガラスモーフィズム、サイバーパンクな照明、またはバイブコードされた AI デコレーションは一切禁止。ハイライトは、物理的なマーカー/ペーパー処理のように見えなければなりません。発光してはいけません。

禁止されている処理は、納品前に拒否してください。

承認されたリファレンス

assets/examples/article-highlight.mp4 を確認し、コーディング前にフレームを参照/コンタクトしてください。そのエディトリアルな階層、十分な余白、控えめなマーカー処理、スローなカメラ、可読性を踏襲します。ローカルアセットがない場合は、公式リポジトリギャラリーを使用します：https://github.com/Liamrjohnston/remotion-motion-graphics-skill

使用する場面

以下の場合に使用します：

• 情報/ニュース/リリース/トレンドのビート。
• 「何かが変わった、またはリリースされた」という証明。
• 意味のあるハイライトフレーズを含む実際の記事の抜粋。
• エディトリアルな内容がポイントを明確にする、ターミナル以外の証拠。

CLI/セットアップ/エージェント実行のストーリーには terminal-inserts を使用します。製品デモのビートには、実際の製品の映像/UI を使用します。

コアアーキテクチャ

マーカーのストロークをテキストの後ろに配置する必要がある場合、記事をフラットにしてはいけません。レイヤード Remotion DOM/SVG を構築します：

1. 選択されたシーンサーフェス。
2. 十分なセーフパディングを持つエディトリアルペーパー/カード。
3. ペーパーの上の rough.js/SVG マーカーレイヤー。
4. マーカーの上の DOM/SVG テキスト。

マーカーは、テキストの背後にあり、ペーパーの上に明確に見える必要があります。

マテリアルとレイアウト

• ペーパー：ウォームホワイト/オフホワイト、ニュートラルなボーダーとソフトなニュートラルシャドウ。色付きのグローは禁止。
• タイポグラフィ：エディトリアル/ニュースの階層—小さなセクションラベル、大きなセリフ/エディトリアル見出し、控えめな著者/日付、最大 2〜3 行の短い本文。
• ハイライト：控えめな半透明の物理マーカーの色（例：マットな黄色）。蛍光色は禁止。
• 実際の記事/ソースのアイデンティティと提供されたコピーを使用すること。出版物、日付、主張、引用を捏造してはいけません。
• 意図的にハードラップし、テキストを変換されたセーフマージン内に収めること。
• タイトルスライドのように中央揃えにしないでください。本物の記事の抜粋のように感じさせること。
• 出力サイズで読めない場合、不要なピル/ボタン/ソースのごちゃごちゃを削除すること。

アニメーション

• 承認されたリファレンスをサポートする場合にのみ、短く控えめなブラーからフォーカスへの移行で開始。ブラーは光学的なフォーカスであり、グローではありません。
• 初期のフォーカスフェーズ中はマーカーを表示しない。
• スローで微妙なカメラの押し込みと、控えめなパースペクティブローテーションを使用。
• フォーカスが落ち着いた後にマーカーのストロークを開始。
• 各ハイライトをマスク/ワイプを使用して左から右に描画。
• ハイライトは順次表示。一度にすべてを表示しない。
• すべてのキーフレーズが読めて、安定して保持された状態で終了。
• アニメーションは useCurrentFrame()、spring()、interpolate() で駆動。CSS アニメーションは使用しない。

ハイライターのルール

• rough.js、または不規則な SVG マーカーシェイプを使用。
• マーカーはテキストの後ろに残る。
• わずかな不完全さは良い。完璧なグラデーション長方形はダメ。
• 意味のある確認済みのフレーズのみをハイライト。段落全体ではなく。
• マーカーの不透明度は、テキストのコントラストを維持すること。
• 蛍光イエロー、発光、ブラーのハロー、またはグローするエッジは禁止。

冗長なナレーションの禁止

記事/ソーステキストは、それが実際の証拠である場合にのみ表示されることがあります。VO で単に繰り返されるだけの別の見出しを追加してはいけません。本物の抜粋と最小限の構造メタデータのみを使用します。

初回拒否ゲート

すべての質問に「いいえ」と答えられるまで納品してはいけません：

1. フォーマットまたは背景が未確認ではなかったか？
2. ネオン、グロー、発光するマーカー処理、色付きの影、グラデーションウォッシュ、またはガラスモーフィズムはないか？
3. ソース/記事のアイデンティティまたは主張が捏造されていないか？
4. カードが、エディトリアルサーフェスではなく、一般的な中央揃えのタイトルスライドになっていないか？
5. 選択された Instagram プレースメントで、重要なテキストが読めない部分はないか？
6. マーカーがテキストの上/を隠していないか、または早すぎるタイミングで表示されていないか？
7. カメラがペーパーを切り取ったり、無駄な移動を生み出したりしていないか？
8. 結果が、承認されたリファレンスの控えめさと洗練さを欠いていないか？

ゲートを通過するまで非公開で修正します。

QA と納品

1. 型チェック、または可能な限り最小の意味のあるバリデーションを実行。
2. ハイライトなしの初期スチル、ストローク途中のスチル、最終ハイライトのスチル、およびエンドホールドのスチルをレンダリング。
3. マーカーが初期に非表示で、テキストの背後にあり、最後に完全であることを確認。
4. クリッピング、読めないコピー、捏造されたソース詳細、ネオン/グロー、弱いフレーミングを検査。
5. MP4 を、寸法、継続時間、正確なレンダリングコマンド、およびエディタープレースメントメモと共に納品。