---

name: cli-demo-gif version: 1.0.0 description: Generate CLI demo GIFs using vhs (Charmbracelet). Use when creating terminal recordings for README files or documentation.

CLI Demo GIF Generator

Create polished terminal demo GIFs using vhs.

Prerequisites

Copybrew install vhs

Usage

1. Create tape file

Place in docs/demo/ to keep root clean:

Copymkdir -p docs/demo

2. Tape file structure

Copy# Description comment
Output docs/demo/demo.gif

Set Shell "bash"
Set FontSize 16
Set Width 900
Set Height 500
Set Padding 20
Set Theme "Catppuccin Mocha"
Set TypingSpeed 50ms

# Commands here
Type "command --help"
Enter
Sleep 2s

3. For unpublished CLI packages

Use Hide/Show to set up aliases silently before the visible demo:

Copy# Set up alias without showing it
Hide
Type "alias mycli='bun run src/cli/index.ts'"
Enter
Sleep 500ms
Show

# Now show the demo with clean commands
Type "mycli --help"
Enter
Sleep 2s

4. Generate GIF

Copyvhs docs/demo/cli.tape

Tape Commands Reference

Recommended Themes

• Catppuccin Mocha - dark, modern
• Dracula - dark purple
• Tokyo Night - dark blue
• One Dark - dark
• GitHub Dark - GitHub's dark theme

Tips

• Keep GIFs under 1MB for fast loading
• Use Sleep generously so viewers can read output
• 50ms typing speed looks natural
• 900x500 works well for most CLIs
• Show 3-5 commands max per GIF