Communitygithub.com

エフェクト: 51種類のビデオエフェクト(by Ray, @raycfu)

トーキングヘッド動画に51種類のビデオエフェクトを追加します。オービット、スポットライト、ガラスウィジェット、タイムライン、チェックリスト、見出しウォール、コメントボックス、電話ファン、リキッドグラスグラフ、マッチカット、iPhoneトグル、LEDサイン、肩越しズーム、iMessageポップアップ、グリッド配置など。エフェクトは話者の顔を追跡し、頭の後ろに配置できます。ユーザーが「/effects」とタイプしたり、エフェクト名を指定したり、動画にエフェクト、ズーム、グレード、ステッカー、アニメーションを追加するよう依頼したときに使用します。

エフェクト: 51種類のビデオエフェクト(by Ray, @raycfu) とは?

このスキルは、トーキングヘッド動画に51種類のプロフェッショナルなビデオエフェクトを追加するためのツールです。話者の顔を自動追跡し、エフェクトを頭の後ろや周囲に配置することで、被写体を隠さずに視覚的に豊かな演出が可能です。対応するエフェクトには、オービット(周回)、スポットライト、ガラスウィジェット、タイムライン、チェックリスト、見出しウォール、コメントボックス、電話ファン、リキッドグラスグラフ、マッチカット、iPhoneトグル、LEDサイン、肩越しズーム、iMessageポップアップ、グリッド配置など多岐にわたります。ユーザーは「/effects」コマンドでエフェクトを指定するか、自然言語で要求できます。また、エフェクトの開始・終了時間を指定したり、テキストや色などのオプションをカスタマイズすることも可能です。このスキルはClaude CodeなどのAIエージェント向けに設計されており、自動化されたセットアップスクリプトとPythonベースのレンダリングエンジンを使用します。ユーザーは非技術者を想定しており、AIエージェントがすべてのコマンド実行を代行することで、簡単にプロフェッショナルな動画エフェクトを適用できます。

対応✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/raycfu/claude_design_skills/tree/HEAD/effects

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

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

ドキュメント

エフェクト: 51種類のビデオエフェクト(by Ray, @raycfu) は何をしますか?

ユーザーは通常、技術に詳しくありません。返信は短くフレンドリーに保ち、代わりに作業を行い、コマンドを自分で実行するよう依頼しないでください。

以下のパスはすべて、このスキルのフォルダ(このSKILL.mdがあるフォルダ)を基準としています。コマンドでは絶対パスを使用してください。

1. 初回実行: セットアップ(一度だけ)

bash scripts/setup.sh を実行します。完了すると READY と表示されます(初回は1〜3分かかります)。

  • NEED_FFMPEG: ffmpegをインストールします。Macの場合: brew install ffmpeg(brewがない場合は、brew.shからHomebrewをインストールするよう伝えてください)。Windowsの場合: winget install ffmpeg。
  • NEED_PYTHON: Python 3.12をインストール(Mac: brew install [email protected]、Windows: winget install Python.Python.3.12)し、セットアップを再実行します。
  • Windowsでは、Pythonは .venv\Scripts\python.exe にあります(.venv/bin/python ではありません)。
  • bashがないWindows: py -3.12 -m venv .venv を実行し、次に .venv\Scripts\python.exe -m pip install -r requirements.txt を実行します。オプションで、よりきれいなカットアウトを行うには、https://github.com/PeterL1n/RobustVideoMatting/releases/download/v1.0.0/rvm_mobilenetv3_fp32.onnx を models/ にダウンロードします。
  • NEED_PYTHON_312: デフォルトのPythonではパッケージをインストールできませんでした。上記の手順でPython 3.12をインストールし、セットアップを再実行します。
  • TensorFlow Lite、MediaPipe、OpenCVからの無害なログ行(INFO:、WARNING:、W0000、[ WARN)は正常です。成功を示すのは Done: または saved のみです。

2. 動画とエフェクトを取得する

  • 動画: ユーザーがファイルをチャットにドラッグするか、パスを指定します。縦長のスマホ動画が最適です。
  • エフェクト: /effects <名前> から、またはユーザーの説明から取得します。ユーザーの言葉を以下の表に照らし合わせます。不明な場合は、リストを表示します。
  • ユーザーの名前とハンドル: プロフィールを表示するエフェクト(glass-widgets、comment-box、pastel-word、profile-wall、headline-wallなど)は、デフォルトでRay / @raycfuを使用します。ユーザーに一度だけ名前とハンドルを尋ね、すべてのエフェクトに name と handle を渡します。

3. タイミングを見つける

  • 「Xという単語のところ」や「...と言ったとき」と言われた場合は、.venv/bin/python scripts/words.py <動画> を実行し、その時間を使用します。
  • タイミングの指定がない場合は、クリップ全体にエフェクトを適用するか、どの部分かを(簡単な質問で)尋ねます。
  • 短いウィンドウが最も見栄えが良くなります: エフェクトあたり1.5〜4秒。

4. ドラフト、確認、レンダリング

  1. 動画の横に <動画名>_effects.json として計画を書きます:
    {"effects": [
      {"fx": "orbit", "start": 3.2, "end": 6.0},
      {"fx": "backdrop-word", "start": 14.0, "end": 16.3, "text": "CLAUDE"}
    ]}
    
  2. 最初にフレームを確認します(高速): .venv/bin/python scripts/fx.py --plan <plan.json> <動画> <フォルダ>/check.png --still 4.5,15.2 を実行し、各エフェクトの中間の時間を使用します。PNGを自分で確認します。テキスト、タイミング、オプションが適切でない場合(顔を覆っている、端で切れている、読みにくい)は修正します。
  3. レンダリング: .venv/bin/python scripts/fx.py --plan <plan.json> <動画> <動画名>_effects.mp4 を実行します。出力は元の音声を保持します。デフォルトでは1080pでレンダリングされます。4Kの場合は --width 2160 を追加します(より遅くなります)。
  4. ファイルの場所をユーザーに伝えます。投稿する前に確認するよう、一行で注意を促します: ドラフトを作成し、ユーザーが承認します。

単一のエフェクトには計画は不要です: .venv/bin/python scripts/fx.py orbit <動画> <出力.mp4> --start 3 --end 6 --text "..." --opt key=value。

51のエフェクト

#fx 名前機能オプション(すべて任意)
1noiseあなたの頭の後ろにリールが積み重なります、0.25秒ごとに1つimages(スクリーンショットまたはクリップのフォルダ)、size
2lineup番号付きタイルがあなたの頭の上に弧を描いて広がりますtext(タイル名を `
3locked-onコーナーブラケットがあなたの顔にスナップし、カメラが追従しますzoom(デフォルト1.35)、text(タグ)
4orbitあなたのリールが頭の周りを回転します: 前は下、後ろは上images、count、speed、size
5lean-in一つの単語に素早くズームインしますzoom(デフォルト1.45、最大2)、speed
6backdrop-word巨大な単語があなたの後ろに落ちてきますtext、color(16進数)、font(bold または serif)
7spotlight照明を消し、あなただけを照らしますtext(あなたの後ろに光る単語)、color、push
8the-billあなたの指示をレシートのように頭の上の壁に印刷しますtext(行を `
9moodyムーディーなカラーグレードgrade(moody、bw、warm、cool、pop)
10swipeビフォーアフターのスライダーがあなたを横切りますgrade(「アフター」の見た目)
11todoあなたの横にあるチェックリストカードが、話すにつれてチェックを入れていきますtext(アイテムを `
12comment-boxInstagramのコメントバーが単語をタイプして投稿しますtext(デフォルト EFFECTS)
13tapフォローボタンがポップアップし、フォロー中に反転しますat(反転する動画の秒数)、x、y(0から1)、color
14pause-pointフレームをフリーズし、手描きの矢印であなたを指しますtext(ラベル)、color、label_x
15uninstallノイズの多いアンインストールバーがフレームを破壊しますtext
16reel-frameあなたの動画がInstagramリールカードに縮小しますtext(ハンドル)
17shortcut-rainキーボードキーがあなたの後ろに降り注ぎますtext(キーを `
18reject-stamp大きな赤いスタンプが画面に押されますtext、color、angle、y
19countdown-flipあなたの頭の上で3、2、1のフリップクロックfrom
20rabbit-holeフレームがトンネルの中に入り、回転しますratio、speed、spin
21cover-starあなたが雑誌の表紙になり、タイトルが頭の後ろにtext(タイトル)、lines(`
22scribbleマーカーの落書きがあなたの周りに描かれますtext(ラベル)、color
23glass-widgetsすりガラスのウィジェットとミニアーティファクトが頭の周りに浮かび、さらに「Edited by Claude」ピルtext(大きな数字)、name、handle、look(simple で3ウィジェット版)
24red-collage白黒のあなた、後ろに巨大な赤い単語、3行がスラムインtext(赤い単語)、lines(`
25split-headline見出しカードがスライドダウンし、あなたを下半分に押し込みますtext(行を `
26pastel-wordラベンダールーム、あなたの後ろに巨大な単語、プロフィールカードがフォローされますtext、name、handle
27check-pills方眼紙の部屋、後ろにリールボード、カーソルが青いピルをクリックtext(ピルを `
28timeline濃い赤のフィルムグレードと編集タイムライン、RECタイムコード、光るプレイヘッドtext(タイトル)、sub、tc
29headline-boxズームインと2行の見出し、2行目は白いボックス内text(行を `
30profile-wallあなたのリールグリッドが後ろの壁を埋め尽くし、カウンターが増加images、count、label
31tier-listティアリストが現れ、ClaudeがSティアに飛び込みますtitle、item、others
32broll-split上にBロールと値札ステッカー、あなたは下images、text(タグ)
33phone-fanあなたのリールが電話の手札のように見出しの下に広がりますimages、text(行を `
34dot-revealあなたのショットが光るドットから構築され、その後全体像に切り替わりますcolor、cell
35headline-wallあなた自身の見出しが頭の後ろに積み重なり、その後合計が前にポップアップtext(`見出し::メタ
36checklistあごの下にClaudeタスクリスト: 各ステップが回転し、緑色にチェックtext(`ステップ::メタ
37liquid-glass-graphあごの下にリキッドグラスカード: 緑のグラフが上昇し、数字がカウントアップtext(ラベル)、from、to(例 197K、59%)、color
38carousel-spinあなたのリールが3Dカルーセルで周りを回転し、ゆっくり停止しますimages、count、size、turns
39match-cutニュースページが一つの単語でカットされ、頭の後ろの赤いボックスに固定text(単語、デフォルト Claude)、color
40apple-togglesあごの下のiPhone設定カードがスイッチをオンに、一行ずつtext(行を `
41led-sign照明が落ち、光るLEDサインがあなたの後ろにタイプアウトtext(行を `
42slow-pushスローなシネマティックプッシュイン、部屋がフォーカスアウトzoom(デフォルト1.6)、blur
43over-the-shoulder-zoomカメラが上の隅にプッシュイン、透けるリキッドグラスグラフが頭の横にポップ(線が上昇、数字がカウントアップ)、引き、次にもう一方の隅に2番目の関連棒グラフ。あなたの頭は前に残りますtext(2つのラベルを `
44messagesiMessage通知が次々にポップイン、クリーミーなガラスで柔らかな輝き、フレーム下部から積み重なりますtext(メッセージを `
45place-in-gridすりガラスの3x3プロフィールグリッドの中央タイルに縮小、その後8つのリールが周りにポップ、各フレームに1つ、各タイルにInstagramビュー数images(リールまたはカバーのフォルダ)、views(9つのカウントを `
46tape-labelあなたのテキストが入った黄色いテープのレベルストリップが胸に置かれ、顔にかからないようにtext
47select-resizeハンドル付きの青い選択ボックスが頭の上の数字を掴み、カーソルがそれを大きくドラッグtext(デフォルト 2X)
48wave-trim頭の上の暗いパネルがあなたの声を表示; 両端の赤い点線の無音が収縮し、あなたの言葉だけが残るなし
49huge-strike一つの巨大なセリフ単語が頭の後ろにワイプイン、その後赤い線がそれを打ち消しますtext、at(打ち消しが入るエフェクト開始からの秒数、デフォルト0.6)
50crayon-write赤いクレヨンがあなたの後ろに単語を書き、下線を引いて飛び去りますtext
51fan-buildあなたのリールカバーが頭の後ろに一枚ずつファン状に広がりますimages(カバーのフォルダ)、count(デフォルト13)

名前付きルック(同じエフェクトのより凝ったバージョン; カウントには含まれません):

  • glitter-spotlight = look=sparkle の spotlight: 部屋が暗くなり、金色の光線が頭の後ろから放射、輝く金色の単語、きらめくスパークル、あなたの周りのグロー。text(単語)、color、push。
  • look=editorial の cover-star: 柔らかく暖かいフィルムルック、頭の後ろにクラシックなセリフマストヘッド、発行行とエレガントなカバーライン。text(マストヘッド)、issue、lines(3行を | で)、right(行を | で)、color、accent、lines_y、right_y。
  • look=bento の liquid-glass-graph: 上昇するグラフが頭の後ろのスモークガラススクリーンに移動、あなたの前にガラスの弁当タイル(ドーナツ、KPI、バー)。text、from、to、donut(29%::ラベル)、kpi(672K::ラベル)、bars(197|140|124::ラベル)。
  • apple-toggles が今度はあなたの上、頭の後ろに配置され、優しいズーム付き(pos=below で古いあご下カード; overlap、zoom)。

エイリアスも機能します: bill、to-do、follow、stamp、countdown、cover、rain、pause。

ルール

  • 顔を絶対に隠さないでください。すべては人の後ろに行くか、自動的に顔を避けます; チェックフレームでまだ顔にテキストが表示されている場合は、移動させる(x、y)か、テキストを短くしてください。
  • エフェクトはリストされた順序で実行されます。カメラエフェクト(locked-on、lean-in、spotlight)は、他のエフェクトと重なる場合に最初に配置してください。
  • ズームは2倍を超えないようにしてください。動画の鮮明さを保つためです。
  • このスキルは視覚効果のみを追加します。効果音やキャプションはユーザーが行います(CapCutが適しています)。
  • これらはスターターバージョンです。ユーザーが見たリールと比較した場合は、その点を正直に伝えてください。

追加オプション(Ray版)

これらは実際の映像で見栄えが悪かった点を修正するために、スターターエフェクトに追加されました。他のオプションと同様に渡します(計画では "key": "value"、コマンドラインでは --opt key=value)。

エフェクトオプション機能
任意のカード/オービットエフェクトplay=1images フォルダ内の各動画をカード内で静止画ではなく再生
liquid-glass-graphpos=behindグラフを胸の上ではなく、頭の後ろの暗いガラス画面に配置
liquid-glass-graphsmoke=0.5..0.85透けるリキッドグラスの代わりにダークスモークガラス(体のぼやけたコピーなし)
liquid-glass-graph、over-the-shoulder-zoomto=$32,000通貨プレフィックスと千単位の区切りを正しくカウントアップ
checklistsmoke、scale=0.86、bottom=0.95、guard=0暗く読みやすいカード、小さめ、低い位置に配置して顔に触れないように
checklistspan=2.9チェックが入るまでの秒数。最後のチェックがジェスチャーに合うように
spotlightflicker=0、lift=0.8ネオンのちらつきオンをオフにする、または単語を下げて頭の一部で覆う
cover-starmast_y=0.15マストヘッドの高さを固定(よりタイトなクロップと組み合わせて頭で重なるように)
comment-boxlock=1、avatar_color=#FDB827コメントシートを固定、アバターの色を設定(文字は handle から取得)

カードの前の手: エフェクトをレンダリングし、その後 .venv/bin/python scripts/hands_front.py <元の動画> <エフェクト付き動画> <出力> を実行します。

カットアウト品質: models/rvm_mobilenetv3_fp32.onnx が存在する場合、すべてのエフェクトは人物カットアウトに Robust Video Matting を使用します(髪の毛がきれいに、ちらつきなし)。FX_MATTE=mp を設定すると、元の MediaPipe セグメンターを使用します。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル