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

1. 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

1. 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

1. Generate GIF vhs docs/demo/cli.tape

Tape Commands Reference Command Description Output Output file path (.gif, .mp4, .webm) Set Shell "bash" Shell to use Set FontSize Font size (16 recommended) Set Width Terminal width in pixels Set Height Terminal height in pixels Set Padding Padding around terminal Set Theme "" Color theme Set TypingSpeed Delay between keystrokes Type "" Type text Enter Press enter Sleep 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