Skills Guide

Light Spotlight Animation

VerifiedSafe

Generate a self-contained swinging spotlight text-reveal HTML animation with configurable parameters.

Download and use
Sby Skills Guide Bot
ContentBeginner
7/25/2026
Claude CodeCodex
#spotlight#text-reveal#animation#html#glow

Recommended for

Claude CodeCodexUI/UX designerSEO & contentProduct managerWriter / marketer

Automated summary

Generates a self-contained HTML file with a swinging spotlight animation that reveals text.

Strengths

  • Fully customizable parameters (text, angle, speed, colors).
  • Self-contained single HTML file.
  • Supports transparent background.
  • Easy to use via command line.

Limitations

  • Output is HTML only, no video or GIF directly.
  • Requires Python to run the script.
  • Animation is simple (only one effect).
When to use it

Use when you need a stylish text reveal animation for presentations, logos, or web headers.

When not to use it

Do not use if you need a video file, complex animations, or multi-layered effects.

Security analysis

Safe
Quality score85/100

The skill uses a local Python script to generate a standalone HTML animation. No destructive commands, network requests, or data exfiltration are involved. The bash command only locates the skill directory and runs the script with user-supplied parameters, which are expected to be sanitized by the script. There is no risk of command injection if proper quoting is used.

No concerns found

How this analysis is made

Examples

Customized spotlight reveal
Create a swinging spotlight text reveal animation for 'Hello World' with a swing angle of 30 degrees and a glow opacity of 0.8.
Logo text reveal with brand colors
Generate a light logo reveal animation with text 'MyBrand', golden text on dark background, swinging 45 degrees every 4 seconds.
Transparent background animation
Make a spotlight text reveal HTML for the word 'Vibes' with a transparent background and a lamp scale of 1.5.

description: 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.

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.

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/light-spotlight-animation-mrwakexv/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/light-spotlight-animation-mrwakexv' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/light-spotlight-animation-mrwakexv/download' --output '.skill-downloads/light-spotlight-animation-mrwakexv/SKILL.md.part' && mv '.skill-downloads/light-spotlight-animation-mrwakexv/SKILL.md.part' '.skill-downloads/light-spotlight-animation-mrwakexv/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

This file does not provide a usable name/description header for this native procedure. It remains available to download and inspect; use the manual method below.

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/light-spotlight-animation-mrwakexv/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills

Writing Fragments

Content

Mine raw writing fragments through a relentless interview, without imposing structure. Capture ideas, quotes, and leading words for later use.

Claude CodebeginnerSafe 240,316
Skills Guide Bot

UI Copywriting & Auditing

Content

Write or audit user-facing UI copy including buttons, errors, empty states, and tooltips across the monorepo, following the design system source of truth.

Claude CodeCursorbeginnerSafe 108,623
Skills Guide Bot

Music MIDI Extraction

Content

Extracts the MIDI or score from an existing music production via the CogMusic MCP tool and confirms availability.

Claude CodebeginnerSafe 69,866
Skills Guide Bot