ロゴアニメーションの生成
このスキルは、ロゴ画像を5秒間のアニメーションレビュー動画に変換します。各スタイルは、ヘッドレスChromeがフレームごとにレンダリングするキャンバスシーンです。ffmpegがフレームをエンコードし、サウンドはシーンが報告するイベント（着地、ポップ、ちらつき）から合成されます。AI画像サービス、ストック映像、サンプルは使用しません。すべてのスタイルの最後のフレームは、ロゴファイル自体のピクセルそのものであるため、アニメーションがブランドを「再描画」することはありません。
要件：Node 22+、ffmpeg（libx264、libvpx-vp9、prores_ks）、およびChromeまたはChromium。Chromeが標準の場所にない場合は、CHROME_PATHを設定してください。
ワークフロー
1. ロゴを見つけて確認する
ユーザーが意図するファイルを見つけます。作業ディレクトリ、~/Downloads、~/Desktop を確認するか、尋ねてください。レンダリング前に画像を読み取ってください。背景が透明か平坦か、個別の形状がいくつあるか、ワードマークがすでに含まれているか、色を確認します。これにより、どのスタイルが最も効果的かが決まります。プレビューを確認する際は、覚えておいてください。
2. 概要を決める（質問ではなくデフォルトを使用する）
デフォルトは、全5スタイル、1920×1080、60 fps、自動背景、MP4＋透明WebMです。質問は、出力を変更する答えが必要で、かつ推測できない場合のみに行います。たとえば、ユーザーが名前の追加を希望するが、正確なスペルや色分割の位置がわからない場合などです。
| ユーザーの希望 | オプション |
|---|---|
| 特定のスタイル | --styles liquid,neon |
| Instagram / 正方形、TikTok / リール / 縦型 | --size square、--size vertical（または --size 1280x720） |
| マークの横にブランド名 | --text "Pharm|Kulen"（| はロゴから取得した2色に分割します）、--font "Arial Rounded MT Bold"、--text-colors "#0a3fa8,#ff9a00" |
| 暗いまたは明るいページ | --bg dark、--bg light、--bg "#0b1e2d"（ネオンは常に暗い） |
| Premiere / Final Cut用のファイル | --prores（アルファ付きの大きなProRes 4444 .movを追加） |
3. まずプレビュー（分単位ではなく秒単位）
<skill>/scripts/animate.sh "<logo>" --preview --out "<out-dir>" [options]
これにより、<name>-5s-<style>-preview.png（スタイルごとに10枚の静止画）と、2スタイル以上の場合は<name>-5s-overview.png、スタイルごとの-info.jsonが書き出されます。概要を読んで以下を確認してください。
- 切り抜き: エッジがきれいで、ロゴの内側に背景色や点がないこと。背景が切り抜かれた（ファイルに透明度がない場合）ときは、info.jsonの
keyedBackgroundがセットされます。 - グループ化:
partsは個別の形状の数、textPartsは検出された文字の数です。ネオンのちらつき、リキッドビーズ、バウンスドロップで文字を単語として扱うには、文字がテキストとして検出される必要があります。 - フレーミング: 何も切り取られておらず、サイズが適切であること。
問題がある場合は、末尾の「分析の問題の修正」を参照してください。フルレンダリングの前にユーザーが意見を求めている場合は、概要をユーザーに見せてください。
4. レンダリング
<skill>/scripts/animate.sh "<logo>" --styles <list> --out "<out-dir>" [options]
各スタイルは約60～70秒かかります（不透明パスと透明パス、およびエンコード）。4スタイル以上の場合は、バックグラウンドで実行してください。スタイルごとの出力は、出力フォルダに格納されます。
<name>-5s-<style>.mp4（音声付き）、-alpha.webm、-alpha.mov（--prores指定時）、-sfx.wav、-keyframes.png、-info.json。
5. 引き渡す前に確認する
- 各
-keyframes.pngを読んでください。最後の静止画は、クリーンで完全なロゴである必要があります。 ffprobeを使用して、5.000秒の長さとサイズを確認します。サウンドピークは-3 dBに正規化されています。- MP4と概要をユーザーに送信し（利用可能な場合はSendUserFile）、すべてのファイルをリンクとしてリストアップします。透明バージョンと各スタイルの機能を1行ずつ説明してください。
6. 反復
タイミングは各スタイルのscripts/styles/<style>.mjs内のTオブジェクトにあります。他のすべてのタイミングはそれに依存し、サウンドも自動的に追従するため、そこで変更します。5つのスタイルでは実現できない外観や、ロゴの形状が特定の動作をする必要がある場合は、新しいスタイルを作成します。references/custom-style.mdを参照してください。
スタイル
詳細はreferences/styles.mdにあります。ユーザーの選択時や説明時に読んでください。
- liquid: ロゴのメインカラーの滴がページに落ち、最大の形状に広がります。他の形状や文字はビーズとして絞り出されます。丸みを帯びた有機的なロゴに最適です。
- neon: 暗いページ上で、光るチューブが各形状をなぞり、ロゴがフラッシュとともに点灯し、文字が看板のように点滅します。非常に暗い形状は白くなります。
- bounce: 大きな形状が転がり落ちたり転がり込んだりしてプラスチックのようにバウンドし、次に紙吹雪がポップし、文字が落ちてきます。遊び心があります。
- lens: 虫眼鏡が空のページを横切って移動し、ロゴはそのガラスを通してのみ表示されます。その後、メインの形状からズームアウトします。検索、健康、洞察のブランドに適しています。
- rise: ブランドカラーの細線が開いてバンドになり、形状がその中に浮かび上がります。落ち着いていてコーポレートな印象で、どんなロゴにも機能します。
分析の問題の修正
- JPGロゴの周囲にハローや背景が残る: 背景は境界色でキーイングされます。ロゴが画像の端に接している場合、またはグラデーションや写真の上にある場合は、先に切り抜いて（透明PNGを書き出して）再実行してください。
- 白いディテールが消える（白い背景上の白い形状）: それは正しいキーイングです。それらの白い部分を表示する必要がある場合は、透明PNGを使用してください。
- 文字がテキストとして検出されない: メインの形状の横または下に、同じ高さの3つ以上の個別の文字が1列に必要です。結合された筆記体や単一形状のワードマークは1つのパーツとして扱われますが、riseやlensでは問題なくアニメーションします。
- ワードマークのフォントが間違っている:
--fontはマシンにインストールされている必要があります。fc-listで確認するか、macOSでは/System/Library/Fontsを確認してください。
特注スタイルの作成
ユーザーが「ピルが所定の位置に落ちるように」「虫眼鏡がスキャンするように」など、特定のものを希望する場合は、references/custom-style.mdを読んでください。スタイルAPI、エンジンヘルパー、サウンドイベントリスト、および以前の特注ロゴアニメーションをうまく機能させたテクニックについて説明しています。これには、マークをベクター形状として再構築し、その再構築をPNGと照合し、最後に実際のピクセルに引き継ぐことが含まれます。