visual

/visual

An agent skill that turns a song and an idea into a hand-painted animated music video, made entirely from code.

Every frame is a pure function of time, painted with p5.brush watercolour and ink, rendered in headless Chrome, and joined with the audio by ffmpeg. The agent writes a storyboard, splits the song into chapters, paints each chapter (in parallel with subagents for long songs), checks its own work on contact sheets and renders the MP4.

Two looks:

• Watercolour cartoon: picture-book characters, theatre sets, karaoke lyrics.
• Stop motion: clay puppets, paper-cutout sets with drop shadows, props on visible threads, and replacement jitter, rendered on twos at 12 fps.

Install

git clone https://github.com/Nuu-maan/visual-skill ~/.claude/skills/visual

Requirements: Node 18+, ffmpeg, and Chrome or Chromium. Optional: uv, for automatic tempo detection and lyric timing.

Use

/visual <topic> — <tone and style> — <scene ideas> [audio=path/to/song.mp3] [bpm=N] [out=dir]

Examples:

/visual a stop motion video for my song audio=~/Music/track.mp3
/visual how a black hole forms — playful explainer for kids — len=45s

The agent sets up a project in ./videos/<slug>, writes STORYBOARD.md, paints the chapters, and renders out/video.mp4.

How it works

Render commands, run inside a project:

node render.mjs --sheet=10,12.5,15 --out=out/check.jpg   # contact sheet
node render.mjs --clip=0:10 --out=out/preview.mp4       # preview with sound
node render.mjs --frames --workers=4 [--fps=12]         # all frames, resumable
node render.mjs --encode [--fps=12] --out=out/video.mp4