Communitygithub.com

jislan1220-ux/motion-vidro-liquido

SaaSプロダクト説明動画スタイルのモーションビデオを作成します。実際のインターフェース、音楽に反応するリキッドグリーンライト、高速3Dカメラ、ブレードカットによるロゴの登場、ナレーション、同期したBGMとSFX、DaVinci用パッケージを含みます。初回はユーザーを把握し、8ステップで使い方を教えます。また、ユーザーが送信した動画の改善や、他の動画を参照として受け付けます。

motion-vidro-liquido とは?

このスキルは、SaaS製品の説明動画風モーションビデオを生成する高度なAIエージェントツールです。製品インターフェースを実際に表示し、音楽に同期するリキッドな緑色の光、高速カメラワーク、ブレードカットでロゴを登場させるなど、Claude Wakizashiパート2で確立された独特の視覚スタイルを再現します。ユーザーがテーマ、ナレーション、テキスト、音楽を提供すると、HTMLページとしてフレームごとにレンダリングし、最終的にDaVinci Resolveで編集可能なProRes 422 HQ動画と関連オーディオファイルを出力します。完全に新しい動画の作成、既存動画の改善、外部動画の参照追加の3つのワークフローをサポートします。初回使用時には詳細なプロファイルを作成し、以降はその設定を再利用します。Claude Code(Claude for Desktop)での使用を想定しており、Python、FFmpeg、Chromeに依存し、8段階の承認プロセスを通じて品質を確保します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jislan1220-ux/Wakizashi/tree/HEAD

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

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

ドキュメント

Motion vidro líquido

テーマ、ナレーション、テキスト、そしてユーザーの音楽を、HTMLページとしてフレームごとにレンダリングされた完成モーションビデオに変換します。基準となる承認済みの完成品は、スキル作成者によるClaude Wakizashiパート2です。新しいビデオはスタイルとエンジンをコピーしますが、話題はコピーしません。語り、シーン、ロゴ、クレジットはすべてユーザーのものです。

シーンを作成する前に、references/estilo.mdを読んでください。そこにはスキル作成者が承認した好みと、却下した内容が記録されています。コードを変更したり、何かが壊れた場合は、references/tecnica.mdを読んでください。

初回使用

~/video-tools/motion-vidro/perfil.mdが存在しない場合は、すべてに先立ってreferences/primeiro_contato.mdに従ってください。存在する場合は、プロファイルを読み、名前で挨拶し、どのパスを進むかを尋ねてください。プロファイルの設定はすべてのビデオで有効です。

パス

  • A. 新しいビデオを作成する: 以下の手順に従ってください。
  • B. 送信されたビデオを改善する: references/melhorar_video.mdに従い、診断が承認された後、以下の手順に従ってください。
  • 参照を追加する: いつでも、references/melhorar_video.mdの参照部分に従ってください。

ビジュアルコンセプトは常に、references/estilo.mdに記述されているWakizashiのものです。追加の参照や外部ガイドは、ユーザーが明示的に要求しない限り、このコンセプトを補完するものであり、置き換えるものではありません。

ポルトガル語で短く話してください。ユーザーは見て承認するので、説明する代わりにファイルや画像を表示してください。

依頼するもの

  • プロファイルにない場合、ビデオのテーマと対象視聴者。
  • 音声ナレーションと入力されたテキスト。まだない場合は、テーマに関するスクリプトを書き、承認を求め、録音を待ちます。
  • ユーザーが選択した音楽と、開始する秒数。
  • フォーマット(デフォルトは16:9、1920x1080、30 fps)。
  • ロゴ名とクレジット(質問してください。参照ビデオではBY CREATOR: @diasl_uisvictorとなっているので、ユーザーのクレジットに変更します)。

また、SFX用の.wavファイルが入ったフォルダを依頼してください。ユーザーが持っていない場合は、scripts/gerar_sfx.pyのキットを提供します(references/dependencias.mdに記述)。sfx.json内の名前は、拡張子を除いたこれらのファイルの名前であり、フォルダは--bibliotecaに入ります。

プログラム、SFX、音楽が不足している場合は、references/dependencias.mdに従ってください。不足しているものを1つのリストにまとめ、1回の「はい」で確認を取ってください。

手順

印の付いたポイントで停止して承認を得てください。完全レンダリング後にやり直すと毎回約10分かかるため、エラーは事前に発見する必要があります。

1. 準備

Python、FFmpeg、Chromeが揃っているか確認し、不足があればreferences/dependencias.mdに従ってください。ユーザーの承認を得たら、scripts/preparar_ambiente.shを1回実行します。これによりPython仮想環境が~/video-tools/venv-vidroに作成され、以降のステップでは$PYはWindowsでは~/video-tools/venv-vidro/Scripts/python.exe、MacとLinuxでは~/video-tools/venv-vidro/bin/pythonとなります。プロジェクトフォルダ内で作業し、納品ごとに新しいバージョン(entrega_v01、entrega_v02)を作成し、既に納品したものを上書きしないでください。

2. 分析

$PY scripts/analisar.py narracao.mp3 musica.mp3 INICIO_MUSICA "texto digitado"

analise/palavras.json(各単語のタイミング)、ポーズ、ビート、anim/peaks.js(フレームごとの音楽データ、背景とサウンドウェーブを動かす)を生成します。入力されたテキストが正しいものです。文字起こしはタイミングのためだけに使われます。なぜなら、単語を誤認識する可能性があるからです(「dita」と書かれたテキストを「edita」と聞き取るなど)。

3. 絵コンテ(承認)

ナレーションを文ごとにシーンに分割します。Fluxo de ediçãoスキルがインストールされている場合は、~/.claude/skills/fluxo-de-edicao/guias/oficio-motion.mdと~/.claude/skills/fluxo-de-edicao/guias/etapa-motion-mapa.mdを読んで動きを計画します。各フレーズについて、ストーリーを語るインターフェースオブジェクト、その登場、カメラの方向、SFXを定義します。assets/wakizashi_referencia.htmlをanim/anim.htmlにコピーし、エンジンはそのままに、リストSCを置き換えます。各シーンにテーマに関連するインターフェースオブジェクトを作成します。また、ロゴ、クレジット、<title>、FLの単語を置き換え、最後にWakizashiの残骸がないか確認します。HyperFramesに関するガイドの部分は無視してください。ここでのエンジンはHTMLページです。DUR、HITS(強いビート)、FOC(各シーンでライトが合う場所)、BL(ロゴカットの時間と位置)を調整します。

シーンごとに画像を表示します。

$PY scripts/render.py anim/anim.html analise/t --times 1.5,5.0,6.5
$PY scripts/folha.py analise/t analise/prancha.png

合わせて、テーブル(時間、ナレーション、画像、SFX)を提示します。ユーザーの承認を得てから進めてください。

4. オーディオ(承認)

Fluxo de ediçãoスキルがインストールされている場合は、~/.claude/skills/fluxo-de-edicao/guias/etapa-sfx.mdを読んで各効果音の配置を決めます。sfx.jsonにイベントを設定し(フォーマットはscripts/mixar.pyに記述)、以下を実行します。

$PY scripts/mixar.py narracao.mp3 musica.mp3 INICIO_MUSICA DUR sfx.json entrega_v01 --biblioteca PASTA_DOS_SFX

audio_para_aprovar.mp3を送信します。初期レベルは承認済みのものです。音楽は小さく、SFXは聞こえ、トラックは左右に回り、ナレーション中は自動で音量が下がります。ユーザーが変更を要求した場合は、要求された箇所のみを調整します。

5. フレームテスト(大きなビジュアル変更があった場合のみ承認)

絵コンテから12~16のタイムポイントをレンダリングします。ロゴカットの周囲の複数フレームを含めます。自分で絵コンテを確認し、以下をチェックします。テキストの途切れ、緑色の上に緑色、光の飛び、背後に色がないガラス、画面上の完全なクレジット。

6. レンダリングとプレビュー(承認)

bash scripts/render_all.sh anim/anim.html entrega_v01/_frames NUM_QUADROS
$PY scripts/empacotar.py entrega_v01 motion_nome_v01 --so-preview

レンダリングをバックグラウンドで実行します。previewを送信し、自分が確認した内容と、動きの中で確認できなかった内容を伝えます。

7. パッケージ

ユーザーの「承認」を得たら:

$PY scripts/empacotar.py entrega_v01 motion_nome_v01

ProRes 422 HQ、同じビデオにオーディオを合わせたもの、ボーカル、BGM、SFXの個別トラック、mix.wav、timeline.fcpxmlを生成します。スクリプトはフレーム数と長さを確認し、一致しない場合はエラーで停止します。編集に使用するファイルと投稿に使用するファイルを説明します。

修正を受けた場合

要求された変更を適用し、ユーザーが既に承認した部分は保持します。影響を受ける部分のみをやり直し、完全レンダリングの前にフレームテストを行います。他のビデオにも適用できる修正はすべて、ユーザーに確認した後、日付とともに~/video-tools/motion-vidro/perfil.mdに記録します。references/estilo.mdは変更しないでください。これはオリジナルのスタイルを保持しており、スキルのアップデートで上書きされる可能性があります。

関連スキル