mcpField
L
light-spotlight-render

light-spotlight-render

github.com/vibe-motionCreative & media1.4k863 installsUpdated 3w ago
Repository

About light-spotlight-render

A skill that renders a configurable, self-contained SVG spotlight animation as an HTML file. It is for workflows needing a browser-previewable animation, with control over swing, lamp, colors, and dimensions.

Key features

  1. 01Configurable spotlight animation
  2. 02Sanitized template parameters
  3. 03Self-contained HTML output
  4. 04Transparent background option

Use cases

  1. 01Create a spotlight title animation
  2. 02Preview an animation in a browser

Install

Copy the command and run it in a terminal.

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

After installing, type/light-spotlight-renderin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project README

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

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:

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"

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.

Comments

Markdown supported