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