mcpField
L
light-spotlight-render

light-spotlight-render

github.com/vibe-motionクリエイティブ・メディア1.4k863 回インストール3 週間前に更新
リポジトリ

light-spotlight-render について

設定可能な SVG スポットライトアニメーションを、単体の HTML ファイルとして生成するスキルです。ブラウザーでプレビューする用途に向けて、揺れやランプ、色、サイズを調整できます。

主な機能

  1. 01スポットライトアニメーションの設定
  2. 02テンプレート値のサニタイズ
  3. 03単体 HTML ファイルの生成
  4. 04透明背景への対応

活用シーン

  1. 01スポットライト付きタイトルの作成
  2. 02ブラウザーでのアニメーション確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/vibe-motion/skills --skill light-spotlight-render

インストール後、Claude Code で/light-spotlight-renderを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
assets/
light_spotlight_template.html
scripts/
render_light_spotlight.py

詳細

ライトスポットライトのレンダリング

ワークフロー

  1. アニメーションのパラメーターを収集します。
    • label_text
    • swing_angle_degrees
    • swing_cycle_seconds
    • lamp_scale
    • glow_opacity
    • mask_color
    • text_color
    • background_color
    • video_width
    • video_height
    • output（省略可能）
  2. インストール済みのスキルディレクトリを特定し、scripts/render_light_spotlight.py を実行します。
  3. スクリプトが出力する最終的な HTML の絶対パスを返します。

コマンド

python3 scripts/render_light_spotlight.py \
  --label-text "vibe-motion" \
  --output "out/light-spotlight-vibe-motion.html"

インストール済みスキルの特定

ソースリポジトリのチェックアウトではなく、インストール済みのスキルのコピーを使用します。

skill_dir=""
for base in "${AGENTS_HOME:-$HOME/.agents}" "${CLAUDE_HOME:-$HOME/.claude}" "${CODEX_HOME:-$HOME/.codex}"; do
  if [ -d "$base/skills/light-spotlight-render" ]; then
    skill_dir="$base/skills/light-spotlight-render"
    break
  fi
done
[ -n "$skill_dir" ] || { echo "light-spotlight-render skill not found under ~/.agents, ~/.claude, or ~/.codex"; exit 1; }

python3 "$skill_dir/scripts/render_light_spotlight.py" \
  --label-text "vibe-motion" \
  --output "$(pwd)/out/light-spotlight-vibe-motion.html"

動作

  • assets/light_spotlight_template.html を読み込みます。
  • テンプレートのプレースホルダーを、サニタイズしたパラメーター値に置き換えます。
  • SVG スポットライトのアニメーションを、1 つの HTML ファイル内で自己完結させます。
  • 出力ファイル名は、デフォルトで label_text から生成されます。
  • スポットライトがスイング軸ではなくランプの先端から伸びるよう、頂点にあるランプの拡大縮小の基準点を維持します。
  • 透明な背景を使うワークフローでは、background_color=transparent を指定できます。

出力

  • 主な出力は、単独で動作する .html アニメーションファイルです。
  • アニメーションをプレビューするには、HTML ファイルをブラウザーで開くようユーザーに伝えます。
  • HTML の生成後に動画出力を希望する場合は、スキルを書き換えるのではなく、別のツールやブラウザーでのキャプチャ手順を使ってレンダリングするよう提案します。

コメント

Markdown 対応