b-open-io/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/