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
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, modernDracula- dark purpleTokyo Night- dark blueOne Dark- darkGitHub Dark- GitHub's dark theme
Tips
- Keep GIFs under 1MB for fast loading
- Use
Sleepgenerously so viewers can read output - 50ms typing speed looks natural
- 900x500 works well for most CLIs
- Show 3-5 commands max per GIF