Communitygithub.com

CrissAlvarezH/animated-video

Remotion(React、SVG、three.js)を使用してコードでアニメーションビデオを作成します。解説、キャラクターストーリー、モーショングラフィックス、キネティックタイポグラフィ、ペーパーコラージュ、アニメーションインフォグラフィックなど、2Dまたは3D、スクリプトやナレーションから、任意のアスペクト比で制作します。スクリプトのアニメーション化、アニメーションビデオやリールの作成、モーショングラフィックスの依頼があった場合に使用します。カメラ映像の編集(video-edit)やAI生成クリップ(higgsfield-*)には使用しません。

animated-video とは?

このスキルは、テキストの概要やスクリプトから完全にコードで生成されたアニメーションビデオを作成するための包括的なワークフローを提供します。Remotionフレームワークを活用し、React、SVG、three.jsを使用して、説明動画、キャラクターストーリー、モーショングラフィックス、キネティックタイポグラフィなど、2Dおよび3Dのアニメーションを制作します。ユーザーはアスペクト比を指定でき、ナレーションや音楽に合わせたタイミング調整が可能です。このスキルは、アイデアのブレインストーミング、コンセプトの承認、ボード作成、ミュートテスト、レビューという明確なプロセスに従います。特筆すべきは、すべての画像がコードで生成されるため、AIビデオ生成とは異なり、ショットごとに無料で一貫性が保たれる点です。視覚的な説明(絵)がナレーションより優先され、視聴者が音声なしでも内容を理解できるように設計されています。このスキルは、Claude Codeや類似のAIエージェントツールと共に使用することを意図しており、強力なモデルと高い努力レベルで最適に機能します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/CrissAlvarezH/ai-reel-gen-app/tree/HEAD/.claude/skills/animated-video

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

アニメーションビデオ

Reel Studio ワークスペースの場合: 最初に reel-studio スキル(.claude/skills/reel-studio/SKILL.md)と ビデオのスタイルスキル(styles/<id>/SKILL.md)を読み込んでください。これらは以下のデフォルト設定よりも優先されます:スタイルはビデオごとに既に選択されているため(他のルックやスタイルフレームのラウンドを提案しないでください)、ナレーションは ElevenLabs(Reel Studio → Ajustes → Voz の音声)で、タイミングは tools/el_words.py から取得します(Whisper ではありません)。新しいプロジェクトはスタイルのテンプレートから開始します(templates/remotion-film/ ではありません)。画像検索はウェブ全体で自由に行えます。Ajustes → Imágenes はオプションのAPI統合と画像生成のみを制御します。 このスキルは次の方法で使用します:画像のブレインストーミング、コンセプトの承認、ボード作成、ミュートテスト、レビュー。

簡単な指示を、すべての画像がコードで作成された完成済みアニメーションビデオに変換します。各画像は手続き的に描画されるか、承認されたソースアセットから決定論的に構築されます。画像やビデオジェネレーターからの映像は別のルートです(ステップ2)。最初に ~/.animated-video/profile.md が存在する場合はそれを読んでください。ユーザーの明示された好みが、ここのデフォルト設定より優先されます。

フィルムを構成するもの

アイデアが許す限り独創的に。 フィルムが示すすべてのコンセプトに対して、最も驚くべき、それでいて理解を促進する画像を探してください。奇抜で、不可能で、面白く、または美しいアイデアを歓迎します。それぞれは一つのテストで評価されます:視聴者は、文字通りの画像よりも速くメカニズムを理解できるか、あるいはより長く覚えているか?文字通りの画像は、それに勝るものがない場合にのみ採用される最終手段です。正確さはアイデアを検証します。ナレーションが基盤となる比喩はそのまま維持されます。

絵が説明し、声が確認する。 音声をオフにした状態で、視聴者は画面に表示される内容から各ステップを学習します:メカニズムは因果関係として表現され(カット、送信、ヒット、コピー)、各行のアイデアはその言葉で可視化され、ラベルはイベントを置き換えるのではなく補足します(モーション)。

絵が問いを保持する。 スクリプトは問いを開いたままにし、それを段階的に回答します。最初のフレームがその問いを提起し、ナレーションが回答に到達するまで、画像、ラベル、タイトルのいずれも回答を示しません。回答を見た視聴者は離脱する理由が生まれます。

色が視線を誘導する。 各色の意味を早い段階で決定します:視聴者が追跡する対象はアクセントカラーを持ち、フレーム内で最も明るく、彩度が高いものにします。色はフィルム全体を通じてその意味を維持します。他の役割にはそれぞれ独自の色を与え、意味を持たないものはすべて控えめにします。参考ルックに合わせるには、そのフレームから色をサンプリングし、アニメーターに数値を渡します。ライト、フォグ、グレーディングは、名前の付いた色を灰色に近づけます。

ブリーフごとに新しくデザインする。 スタイルパック、パーツ、過去のフィルムは出発点として使用します。ユーザーが気に入った過去のフィルムは、仕上がりとペースの基準を設定しますが、アイデア、デバイス、ルックの基準にはなりません。

フィードバックは絵を絞り込み、想像力を制限しない。 ユーザーがアイデアを拒否した場合、そのアイデアの何が問題だったかを書き留め(混乱させた、無理やりに感じられた、安っぽく見えた)、より良い別の種類のアイデアを見つけます。ユーザーが明示的にルールとして述べた場合にのみ、それはカテゴリ全体に関するルールになります。他のエージェントに渡すブリーフには、ユーザーが述べたルールのみを含めます。

推奨事項とともに質問する。 「はい」だけで完全な返信となるようにします。最初に、このスキルは利用可能な最も強力なモデルを高い努力レベルで使用する場合に最適に機能することを述べてください。

作品に合わせて制作規模を調整する

  • 短い、またはシンプルな場合: 1つのエージェントで対応可能で、スチルを確認します。ブレインストーミングは新しいエージェントに任せ、ミュートテストは引き続き実行します。
  • 長い場合、または多くの幕がある場合: ユーザーが承認するまで、画像、コンセプト、ルックを1つのエージェントに保ち、その後、制作に適した方法で並列化します。ボードは各ビートのアイデアを確定します。アニメーションを担当する者は、どのように動くかを所有し、より良い画像を思いついたら提案します。フィルム全体で1つのキューシートを維持し、サウンドが意図的に保たれるようにします。長時間の実行では、スチルと残り時間の概算を含むステータスを送信します。エージェントのステータス行にはマシンクロックのタイムスタンプを付けさせます。自己申告の時間は数時間ずれる可能性があるためです。
  • 完成したフィルムのリビジョンの場合: どのセクションを再構築するかを尋ね、最も弱い部分を推奨します。残りは保持し、新しい部分をスプライシングして統合します。
  • 他の誰かのタイムラインへの挿入の場合(カメラ編集内のアニメーションショットで、video-editが所有する場合): 挿入。誰がタイムラインを所有しているか不明な場合は、1回質問します。
  • フィルム内のカメラ出演プレゼンターの場合: 該当ショットの計画前にコンポジットを行います。

1. 画像とコンセプトを見つける

ディレクティングで核を選択します:ストーリー(何かを望む誰か)または解説(何かがどのように機能するか、なぜか、数字が何を意味するか)。画像は、制作ルールを見ない新しいブレインストーミングエージェントから提供され、別の選択エージェントによって評価されます(画像を見つける)。次に、真に異なるコンセプト、あなたの推奨事項、そして選択されたコンセプトを、各ビートの画像を含むタイミング付きビートシートとして提示します。完成したスクリプトは言葉を確定しますが、画像は確定しません。video-scriptスキルがインストールされている場合は、ナレーションをそのチェックリストと照合します。

短い作品も含め、構築を開始する前に、コンセプトとその画像に対するユーザーの承認を得てください。

2. フォーマットとスタイルを確定する

  • リクエストがフォーマットとスタイルを指定している場合は、1行で確認します。それ以外の場合は、同じビートのスタイルフレームとして真に異なるスタイルを提示し(styles)、選択を得ます。選択されたスタイルのパックが存在する場合はそれを読みます。
  • ルートとそのコストについて質問します:コードで作成する場合はショットごとに無料で一貫性があります。AIビデオはクリップごとにコストがかかり、結果が変動します。
  • フィルムに登場する実際のオブジェクト、場所、インターフェースの写真を検索します。実在の人物が登場する場合は、その映像がどこにあるかを尋ね、フレームを抽出します。

3. オーディオの骨格を構築する

すべてのビートはナレーションに合わせてタイミングを取ります(ナレーションがない場合は、先に選択された音楽に合わせます)。ユーザーの録音を優先します。それが存在するまでは、ラベル付きの代用単語タイミングで構築します。templates/remotion-film/align.py は単語のタイムスタンプとラウドネスエンベロープを提供します。cue("phrase") ですべてのキューを単語から導出することで、新しいナレーションがフィルムのタイミングを再調整します。キャプションは、トランスクリプトと照合された手書きの意味単位です。音楽と効果音は最初のカットとともに納品します:ユーザーのファイル、アセットライブラリ、またはディスク上のサンプルを優先し(templates/parts/audio/designed.py)、合成されたものにはラベルを付けます。

4. スケルトンとボード

templates/remotion-film/ をコピーし、幕、キャプション、オーディオを配線し、タイムライン全体のスチルをレンダリングします(パイプライン)。未確認の事実はフィルムに含めないでください。

フルアニメーションの前に、キーフレームボードをユーザーに表示します:選択されたスタイルで、各ビートのスチルを、実際のシーンファイルで構築し、完成したショットに発展できるようにします。承認されたスチルは、その間に何かが起こるかどうかを示しません。動きに意味がある場合は、アニマティック(大まかな形状がナレーションに合わせてビートを実行するもの)が低コストでそれを示します。

5. アセットとショットを構築する

アセットライブラリがインストールされている場合は、最初にそれを検索します。繰り返し登場する要素は、ストーリーが必要とするすべてのスケールで保持します:描画キャラクターはcharactersに従います。partsには、地球儀、iMessage iPhone、デザインサウンド、リアリズムキット、密集したthree.jsモーション用のモーションキットが含まれます。取得したものは必要に応じて再スタイリングします。

複数のエージェントがアニメーションを行う場合、スタイルパックとアンカーフレーム(各ビートの参照フィルムのフレーム、またはボード)から取得した、1つの統一されたルックとバーを提供します。すべてのスタイルにおいて、実際のオブジェクト、インターフェース、企業、場所はそれ自体として認識可能であり、代用オブジェクトも同様の注意を払います。各幕のサウンドイベントを、それを描画する定数から導出し、ビートを移動するとそのサウンドも移動するようにします。

6. レビューと納品

エージェントはフレームを確認し、再生は確認しません:モーションは連続フレームのストリップとしてチェックし(時間的チェック)、オーディオは測定によってチェックし、何が単に測定されただけかを述べます。自分の目を信頼できない場合は、独立した新しいエージェントに判断を依頼します(レビュー)。ラウンドの改善がほとんどないか、最大の問題にユーザーの介入が必要な場合にイテレーションを停止します。

最初のフルカットがユーザーに送られる前に、新しい審査エージェントがミュートテストを実行します。追跡できない部分を修正します。拒否された全体カットは、画像から再開します(再開)。

最終版をレンダリングします(render.sh はラウドネスを正規化します。長いフィルムはチャンクに分割)。最初のフレーム、最後の1秒、ラウドネスを確認します。パス、未解決の問題、スキップされたチェック、ソース画像、および合成または発明されたものを報告します。各バージョンをプロジェクトのgitリポジトリにコミットします。アセットライブラリがインストールされている場合は、そのカタログを閉じます。

リクエストに応じて、振り返りプロトコルを使用して振り返ります。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

CrissAlvarezH/new-style

Create a new visual style for the creator's videos in a Reel Studio workspace (styles/<id>/style.json): interview him for its name, feel, colours and what each one means, fonts, motion, where pictures come from, reference links and images, then write the style so it shows in Estilos and new videos can use it. Use when he asks for a new style or presses "Nuevo estilo" on the Estilos page.

CrissAlvarezH/persona-hablando

The "Persona hablando + animaciones" format of a Reel Studio video — the creator talks to camera in his own recording; you transcribe it, agree the cuts with him (pauses, flubs, retakes), cut it, and lay the video's style animations over or between his shots. Use for any video whose format.txt says persona-hablando.

CrissAlvarezH/reel-studio

How a narrated explainer video is made in a Reel Studio workspace, in any visual style — script, pictures, voice, images, build, board, sound, mute test, render — following the creator's settings from the studio (profile, format, voice, image sources). Use for any new or revised video in a project's videos/ (projects/<id>/videos/). The video's style adds its own skill (styles/<id>/SKILL.md) for the look and the Remotion kit; LESSONS.md has what past videos taught.

CrissAlvarezH/video-script

Write short-form video scripts that hold viewers, using the creator's own video analytics. Use when choosing the hook of a chosen idea, writing or tightening a script before filming (talking-head or narrated explainer), or turning a posted video's insights into lessons. Coming up with ideas is content-ideas'.

関連スキル