light-spotlight-render
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.
Install
npx skills add https://github.com/vibe-motion/skills --skill light-spotlight-renderSKILL.md
Light Spotlight Render
Workflow
- Collect the animation parameters:
label_textswing_angle_degreesswing_cycle_secondslamp_scaleglow_opacitymask_colortext_colorbackground_colorvideo_widthvideo_height- optional
output
- Resolve the installed skill directory and run
scripts/render_light_spotlight.py. - 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=transparentfor transparent-background workflows.
Output
- Primary output: a standalone
.htmlanimation 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.
Related skills
frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreographyhyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.
