Back to Details

cli-demo-gif

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

CLI Demo GIF Generator

CLI演示GIF生成工具

Create polished terminal demo GIFs using vhs.
使用vhs创建精美的终端演示GIF。

Prerequisites

前置要求

bash
brew install vhs
bash
brew install vhs

Usage

使用方法

1. Create tape file

1. 创建tape文件

Place in 
docs/demo/
to keep root clean:
bash
mkdir -p docs/demo
将文件放在
docs/demo/
目录下，保持根目录整洁：
bash
mkdir -p docs/demo

2. Tape file structure

2. Tape文件结构

tape
undefined
tape
undefined

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
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
undefined
Type "command --help" Enter Sleep 2s
undefined

3. For unpublished CLI packages

3. 针对未发布的CLI包

Use Hide/Show to set up aliases silently before the visible demo:
tape
undefined
使用Hide/Show命令在可见演示前静默设置别名：
tape
undefined

Set up alias without showing it

静默设置别名，不显示过程

Hide Type "alias mycli='bun run src/cli/index.ts'" Enter Sleep 500ms Show
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
undefined
Type "mycli --help" Enter Sleep 2s
undefined

4. Generate GIF

4. 生成GIF

bash
vhs docs/demo/cli.tape
bash
vhs docs/demo/cli.tape

Tape Commands Reference

Tape命令参考

CommandDescription
Output <path>
Output file path (.gif, .mp4, .webm)
Set Shell "bash"
Shell to use
Set FontSize <n>
Font size (16 recommended)
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
命令描述
Output <path>
输出文件路径（.gif、.mp4、.webm）
Set Shell "bash"
使用的Shell
Set FontSize <n>
字体大小（推荐16）
Set Width <n>
终端宽度（像素）
Set Height <n>
终端高度（像素）
Set Padding <n>
终端内边距
Set Theme "<name>"
配色主题
Set TypingSpeed <duration>
按键间隔时间
Type "<text>"
输入文本
Enter
按下回车键
Sleep <duration>
等待（例如：2s、500ms）
Hide
停止录制
Show
恢复录制
Ctrl+C
发送中断信号

Recommended Themes

推荐主题

  • Catppuccin Mocha
    - dark, modern
  • Dracula
    - dark purple
  • Tokyo Night
    - dark blue
  • One Dark
    - dark
  • GitHub Dark
    - GitHub's dark theme
  • Catppuccin Mocha
    - 深色、现代风格
  • Dracula
    - 深紫色风格
  • Tokyo Night
    - 深蓝色风格
  • One Dark
    - 深色风格
  • GitHub Dark
    - GitHub深色主题

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
  • 保持GIF文件大小在1MB以下，确保加载速度
  • 合理使用
    Sleep
    命令，让观看者有时间阅读输出内容
  • 50ms的输入速度看起来更自然
  • 900x500的尺寸适用于大多数CLI工具
  • 每个GIF最多展示3-5个命令