mcpField
L
light-spotlight-render

light-spotlight-render

github.com/vibe-motion创意与媒体1.4k863 次安装3 周前更新
代码仓库

关于 light-spotlight-render

此 Skill 可将可配置的 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 聚光灯动画完整封装在一个 HTML 文件中。
  • 默认输出文件名根据 label_text 生成。
  • 保留灯具顶部顶点处的缩放支点，使聚光灯从灯尖而非摆动轴处扩大。
  • 支持将 background_color=transparent 用于透明背景工作流。

输出

  • 主要输出：一个独立的 .html 动画文件。
  • 告知用户在浏览器中打开 HTML 文件以预览动画。
  • 如果用户在生成 HTML 后需要视频输出，建议使用其他工具或浏览器捕获流程进行渲染，而不是重写该技能。

评论

支持 Markdown