CLI Demo GIF Generator

Create polished terminal demo GIFs using vhs.

Prerequisites

brew install vhs

Usage

1. Create tape file

Place in docs/demo/ to keep root clean:

mkdir -p docs/demo

2. Tape file structure

# 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:

# 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

vhs docs/demo/cli.tape

Tape Commands Reference

Command	Description
Output <path>	Output file path (.gif, .mp4, .webm)
Set Shell "bash"	Shell to use
Set FontSize <n>	Font size (16 recommended)
Set Width <n>	Terminal width in pixels
Set Height <n>	Terminal height in pixels
Set Padding <n>	Padding around terminal
Set Theme "<name>"	Color theme
Set TypingSpeed <duration>	Delay between keystrokes
Type "<text>"	Type text
Enter	Press enter
Sleep <duration>	Wait (e.g., 2s, 500ms)
Hide	Stop recording
Show	Resume recording
Ctrl+C	Send interrupt

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