cli-demo-gif

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/