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

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命令参考

Command	Description
`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

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个命令

cli-demo-gif

Original

Translation

CLI Demo GIF Generator

CLI演示GIF生成工具

Prerequisites

前置要求

Usage

使用方法

1. Create tape file

1. 创建tape文件

2. Tape file structure

2. Tape文件结构

Description comment

描述注释

Commands here

此处填写命令

3. For unpublished CLI packages

3. 针对未发布的CLI包

Set up alias without showing it

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

Now show the demo with clean commands

现在使用简洁的命令展示演示

4. Generate GIF

4. 生成GIF

Tape Commands Reference

Tape命令参考

Recommended Themes

推荐主题

Tips

小贴士