terminal-animator

🎬 Terminal Animator

An OpenClaw skill that turns terminal screenshots into polished short video animations. Commands type themselves, responses appear instantly, ASCII art renders pixel-perfect.

What it does

Send your OpenClaw agent a terminal screenshot and ask it to "animate this" or "turn this into a video." The agent will:

1. OCR the screenshot to extract terminal text
2. Parse into command/response blocks
3. Generate a timed subtitle file (ASS) with typing animations
4. Render ASCII art as pixel-perfect PNG overlays (bypasses subtitle font issues)
5. Produce an MP4/GIF video with ffmpeg

The result is a clean 15-30 second clip where commands type character-by-character and responses appear instantly, perfect for demos, social media, or documentation.

Install

As an OpenClaw Skill

# Copy to your OpenClaw skills directory
cp -r terminal-animator-skill ~/.openclaw/skills/terminal-animator

# Install Node.js dependencies
cd ~/.openclaw/skills/terminal-animator
bash scripts/setup-deps.sh

Manual Dependencies

• Node.js 18+
• ffmpeg (with libass support for subtitles)
• canvas npm package: npm install canvas
• DejaVu Sans Mono font (most Linux distros have it)

Usage

With OpenClaw

Send your agent a terminal screenshot:

"Animate this terminal screenshot into a short demo video"

Or paste terminal text:

"Turn this into an animation:

$ curl api.example.com/status
{"status": "ok", "uptime": "99.99%"}
$ echo "done"
done
```"

Standalone (Art Overlay Tool)

Generate a pixel-perfect ASCII art PNG for use in videos:

node scripts/make-art-overlay.mjs \
  --file my-ascii-art.txt \
  --bg "rgb(39,44,51)" \
  --fg "#FFFFFF" \
  --font-size 32 \
  --output art.png

How it works

Why not just use VHS/asciinema?

VHS is great when you can script commands. But when you're starting from a screenshot of an existing terminal session, you need a different pipeline:

1. Extract text from the image
2. Reconstruct the command/response structure
3. Re-render with controlled timing

The ASCII art problem

Unicode box-drawing characters (██╗║═╚╝) used in figlet/toilet-style logos don't render correctly in ASS subtitles because libass doesn't maintain consistent monospace character widths for these glyphs. The letters come out garbled.

Solution: Render ASCII art blocks separately using node-canvas (which handles monospace correctly), then overlay the resulting PNG on the video with ffmpeg's overlay filter. The background color is matched exactly to eliminate visible seams.

Architecture

Screenshot/Text
      ↓
  Parse into command/response blocks
      ↓
  Generate ASS subtitle file (typing animations + response timing)
      ↓
  Generate ASCII art PNG overlays (node-canvas)
      ↓
  Render with ffmpeg (color background + ASS + PNG overlay)
      ↓
  MP4/GIF output

Configuration

Timing

Colors

Colors are set per-project to match the source terminal theme. Common setups:

Output

• MP4 (default): -c:v libx264 -crf 18 for Twitter/LinkedIn/Telegram
• GIF: ffmpeg -vf "fps=15,scale=480:-1" output.gif for READMEs
• WebM: -c:v libvpx-vp9 -crf 30 for web

File Structure

terminal-animator-skill/
├── SKILL.md                          # OpenClaw skill instructions
├── README.md                         # This file
├── scripts/
│   ├── make-art-overlay.mjs          # ASCII art → PNG renderer
│   └── setup-deps.sh                 # Dependency installer
└── references/
    └── ass-format.md                 # ASS subtitle format reference

Credits

Built by OpenClaw agents. Uses ffmpeg, node-canvas, and libass.

License

MIT