Light Spotlight Render

vibe-motion/skills/light-spotlight-render

作者 vibe-motion4c86c0d016a3ba22ee673428a494f3c44f84111f無授權條款收錄於 2026年10月9日更新於 2026年10月9日

Generate a swinging spotlight text-reveal HTML animation with configurable text, swing angle, lamp scale, glow, and colors. Use when users ask for 聚光灯扫字动画, spotlight text reveal, light logo reveal, 发光文字揭示动画, or want a reusable HTML animation instead of a static image.

包含腳本Design & Creative
AI 產生的概覽

產生獨立的 HTML 動畫,以擺動的聚光燈揭示文字,文字、擺動、燈罩縮放、光暈與顏色皆可設定。

功能
接收標籤文字、擺動角度與週期、燈罩縮放、光暈不透明度、遮罩與文字顏色、背景顏色以及影片尺寸等動畫參數,並將清理過的取值填入內建的 HTML 範本。它會執行一支 Python 指令碼,產生內含 SVG 聚光燈動畫的自包含 HTML 檔案,並印出最終的絕對路徑。預設輸出檔名由標籤文字推導而來,也可要求透明背景。
適用情境
當使用者需要聚光燈掃字動畫、發光標誌揭示動畫,或想要可重複使用的 HTML 動畫而非靜態圖片時使用。適合需要在瀏覽器中預覽的發光文字揭示效果。
執行需求
需要 Python 3 來執行隨附指令碼 scripts/render_light_spotlight.py,以及隨附範本資源 assets/light_spotlight_template.html。此技能附帶可執行指令碼,會把 HTML 檔案寫入指定的輸出路徑;未說明需要憑證或網路存取。

Light Spotlight Render

Workflow

  1. Collect the animation parameters:
    • label_text
    • swing_angle_degrees
    • swing_cycle_seconds
    • lamp_scale
    • glow_opacity
    • mask_color
    • text_color
    • background_color
    • video_width
    • video_height
    • optional output
  2. Resolve the installed skill directory and run scripts/render_light_spotlight.py.
  3. Return the final absolute HTML path printed by the script.

Command

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

Installed Skill Resolution

Use the installed skill copy, not the source repo checkout:

bash
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  fidone[ -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"

Behavior

  • Read assets/light_spotlight_template.html.
  • Replace template placeholders with sanitized parameter values.
  • Keep the SVG spotlight animation self-contained in one HTML file.
  • Default output name is derived from label_text.
  • Preserve the top-vertex lamp scale pivot so the spotlight grows from the lamp tip rather than the swing axis.
  • Allow background_color=transparent for transparent-background workflows.

Output

  • Primary output: a standalone .html animation file.
  • Tell the user to open the HTML file in a browser to preview the animation.
  • If the user wants video output after generating the HTML, suggest rendering it with another tool or browser capture flow rather than rewriting the skill.

來源與署名

來源:vibe-motion/skills位於light-spotlight-render提交4c86c0d

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架