# light-spotlight-render

Create a standalone HTML animation that reveals text with a swinging spotlight. Adjust the effect’s text, motion, lamp size, glow, and colors.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 840 installs · ★ 1395
- Author: vibe-motion
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/vibe-motion/skills/tree/HEAD/light-spotlight-render/SKILL.md
- Updated: 2026-10-05
- HTML: https://affpapa.org/en/nevibecode/skills/light-spotlight-render

## What it does

The skill builds an HTML animation from `assets/light_spotlight_template.html`. Its `scripts/render_light_spotlight.py` script inserts sanitized settings for the label, swing angle and cycle, lamp scale, glow, colors, and video dimensions. You can choose an output path; otherwise, the filename is based on the label.

The lamp scales from its top vertex, so its light grows from the tip rather than the swing axis. Set the background to `transparent` for a transparent canvas. Python 3 is needed to run the script. The result is an HTML file, not a video; video output takes a separate tool or browser capture.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill light-spotlight-render -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/light-spotlight-render/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/light-spotlight-render/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill light-spotlight-render -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/light-spotlight-render/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill light-spotlight-render -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/light-spotlight-render/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install vibe-motion/skills light-spotlight-render
```

2. **Manually: put the files in place**
- File: `.github/skills/light-spotlight-render/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill light-spotlight-render -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/vibe-motion/skills --path light-spotlight-render
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/light-spotlight-render/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill light-spotlight-render -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/vibe-motion/skills/tree/HEAD/light-spotlight-render/SKILL.md

## When to use it
- build a text reveal with a swinging spotlight
- adjust the spotlight’s swing and lamp scale
- set the glow and animation colors
- save the effect as a standalone HTML file

## Example prompts
- Create an HTML animation that reveals “vibe-motion” with a spotlight.
- Set the background to transparent and change the glow.
- Generate a spotlight logo reveal and save it as `out/logo.html`.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs

From the same set: [vibe-motion/skills](https://affpapa.org/en/nevibecode/by/vibe-motion/skills.md) — 7 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md