CLI Demo GIF Generator
Generate terminal demo GIFs using vhs. When asked to create a CLI demo GIF, produce a .tape file and render it.
Steps
1. Create tape file
Place tape files in docs/demo/ to keep the project root clean:
mkdir -p docs/demo
Write the tape file with appropriate settings for the project's CLI:
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
Type "command --help"
Enter
Sleep 2s
2. For unpublished CLI packages
Use Hide/Show to configure aliases before the visible demo starts:
Hide
Type "alias mycli='bun run src/cli/index.ts'"
Enter
Sleep 500ms
Show
Type "mycli --help"
Enter
Sleep 2s
3. Render the GIF
vhs docs/demo/cli.tape
Tape Command Reference
| Command | Description |
|---|---|
Output <path> | Output file path (.gif, .mp4, .webm) |
Set Shell "bash" | Shell to use |
Set FontSize <n> | Font size |
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 |
Default Settings
Use these defaults unless the user specifies otherwise:
- Theme:
Catppuccin Mocha - TypingSpeed:
50ms - Width:
900, Height:500 - FontSize:
16 - Output directory:
docs/demo/