How to Record a Terminal GIF

Step-by-step guide to recording terminal sessions as GIF animations using VHS, asciinema, and AgentGIF CLI.

1. Yêu cầu tiên quyết

Để ghi GIF terminal, bạn cần:

VHS — a terminal recorder by Charm that converts scripted terminal sessions into GIFs
ttyd — máy chủ web terminal (phụ thuộc VHS, được cài đặt tự động trên macOS)
ffmpeg — để mã hóa video (được cài đặt tự động trên macOS)

VHS hoạt động bằng cách đọc tệp .tape mô tả các tổ hợp phím, lệnh và thời gian — sau đó phát lại các hành động đó trong terminal ảo và ghi đầu ra dưới dạng GIF.

2. Cài đặt VHS

Nền tảng	Lệnh cài đặt
macOS	`brew install vhs`
Ubuntu/Debian	`sudo mkdir -p /etc/apt/keyrings && curl -fsSL https://repo.charm.sh/apt/gpg.key \| sudo gpg --dearmor -o /etc/apt/keyrings/charm.gpg && echo "deb [signed-by=/etc/apt/keyrings/charm.gpg] https://repo.charm.sh/apt/ * *" \| sudo tee /etc/apt/sources.list.d/charm.list && sudo apt update && sudo apt install vhs`
Arch Linux	`yay -S vhs`
Go	`go install github.com/charmbracelet/vhs@latest`

Xác minh cài đặt:

vhs --version

3. Tạo tệp Tape

Tệp tape là script văn bản thuần cho VHS biết cần gõ gì, khi nào chờ và cài đặt nào cần dùng. Tạo tệp có tên demo.tape:

Output demo.gif
Set Shell "bash"
Set FontSize 16
Set Width 1000
Set Height 580
Set Theme "Catppuccin Mocha"

Type "echo 'Hello, world!'"
Enter
Sleep 2s

Type "ls -la"
Enter
Sleep 3s

Lệnh cốt lõi

Lệnh	Mô tả	Ví dụ
`Output`	Đặt đường dẫn tệp đầu ra	`Output "demo.gif"`
`Type`	Gõ văn bản (mô phỏng tổ hợp phím)	`Type "git status"`
`Enter`	Nhấn Enter	`Enter`
`Sleep`	Chờ trong một khoảng thời gian	`Sleep 2s`
`Ctrl+C`	Gửi phím tắt bàn phím	`Ctrl+C`
`Hide`	Dừng ghi (để thiết lập)	`Hide`
`Show`	Tiếp tục ghi	`Show`

4. Cấu hình cài đặt

Đặt các lệnh Set ở đầu tệp tape, trước bất kỳ lệnh Type nào.

Cài đặt khuyến nghị cho AgentGIF

Set Shell "zsh"
Set FontSize 15
Set Width 1000
Set Height 580
Set Padding 20
Set Theme "Catppuccin Mocha"
Set TypingSpeed 50ms
Set CursorBlink false

Tất cả cài đặt có sẵn

Cài đặt	Mặc định	Mô tả
`Shell`	`"bash"`	Shell để dùng (bash, zsh, fish, sh)
`FontSize`	`14`	Cỡ chữ tính bằng pixel
`Width`	`800`	Chiều rộng terminal tính bằng pixel
`Height`	`600`	Chiều cao terminal tính bằng pixel
`Padding`	`0`	Khoảng đệm xung quanh terminal
`Theme`	`"default"`	Color theme (see theme gallery)
`TypingSpeed`	`50ms`	Độ trễ giữa các tổ hợp phím
`Framerate`	`50`	Khung hình GIF mỗi giây
`PlaybackSpeed`	`1`	Hệ số tốc độ phát lại
`CursorBlink`	`true`	Hiển thị con trỏ nhấp nháy
`LetterSpacing`	`0`	Khoảng cách chữ cái thêm
`LineHeight`	`1.0`	Hệ số chiều cao dòng

Themes

VHS đi kèm với 44 theme tích hợp. Các lựa chọn phổ biến cho tài liệu nhà phát triển:

Theme	Kiểu dáng
Catppuccin Mocha	Tối ấm (điểm nhấn màu pastel)
Dracula	Tím tối
Tokyo Night	Tối màu xanh
Nord	Xanh Arctic
One Dark	Tối lấy cảm hứng từ Atom
Solarized Dark	Tối cổ điển với tông màu ấm
Monokai	Lấy cảm hứng từ Sublime Text

Duyệt tất cả theme với xem trước trực tiếp: Theme Gallery.

5. Ghi GIF

vhs demo.tape

VHS mở trình duyệt headless, phát lại tape và lưu GIF. Ghi hình điển hình mất 10-30 giây.

Xem trước trước khi tải lên:

# macOS
open demo.gif

# Linux
xdg-open demo.gif

6. Tối ưu kích thước tệp

AgentGIF chấp nhận GIF đến 10 MB, nhưng tệp nhỏ hơn tải nhanh hơn. Mẹo để giảm kích thước GIF:

Kỹ thuật	Tác động
Giảm kích thước (`Width 800`)	Đáng kể — giảm một nửa chiều rộng làm giảm bốn lần kích thước tệp
Giảm tốc độ khung hình (`Framerate 30`)	Vừa phải — giảm khung hình 40%
Ghi ngắn hơn	Đáng kể — nhắm đến 5-15 giây
Dùng `PlaybackSpeed 1.5`	Vừa phải — tổng số khung hình ít hơn
Tắt nhấp nháy con trỏ (`CursorBlink false`)	Nhỏ — ít khung hình duy nhất hơn
Nền đặc (tránh độ trong suốt)	Nhỏ — nén GIF tốt hơn

Để cân bằng tốt nhất giữa chất lượng và kích thước, các cài đặt khuyến nghị ở trên tạo ra GIF khoảng 100-300 KB cho bản ghi 10 giây.

7. Tải lên AgentGIF

Tải lên qua CLI (nhanh nhất):

agentgif upload demo.gif \
  --title "Git Interactive Rebase" \
  --command "git rebase -i HEAD~3" \
  --tags git,rebase \
  --open

Or upload via the web interface — drag and drop the GIF file.

Kèm tệp cast cho phép lớp tác nhân AI:

agentgif upload demo.gif --cast demo.cast --title "My Demo"

8. Tính năng Tape nâng cao

Ẩn/Hiện để thiết lập

Dùng Hide/Show để chạy các lệnh thiết lập mà không ghi chúng:

Hide
Type "cd /tmp/demo-project"
Enter
Type "mkdir -p src"
Enter
Show

# Now recording starts
Type "ls -la"
Enter
Sleep 2s

Nhiều định dạng đầu ra

VHS có thể xuất nhiều định dạng cùng lúc:

Output demo.gif
Output demo.mp4
Output demo.webm

Biến môi trường

Set Shell "bash"
Type "export PS1='$ '"
Enter
Hide
Sleep 500ms
Show

Phím tắt bàn phím

Ctrl+C     # Cancel current command
Ctrl+L     # Clear screen
Ctrl+D     # EOF / exit
Tab        # Tab completion
Up         # Previous command
Escape     # Escape key

9. Công cụ ghi hình thay thế

Công cụ	Đầu ra	Ưu điểm	Nhược điểm
VHS	GIF, MP4, WebM	Theo script, tái tạo được, có theme	Cần thiết lập
asciinema	.cast	Ghi trực tiếp, tệp nhỏ	Không có đầu ra GIF (cần chuyển đổi)
Terminalizer	GIF	Ghi trực tiếp, cấu hình YAML	Kích thước tệp lớn
Peek	GIF, WebM	Trình ghi màn hình GUI	Không dành riêng cho terminal

Chúng tôi khuyến nghị VHS cho demo theo script (tái tạo được, kiểm soát phiên bản) và asciinema + chuyển đổi VHS cho bản ghi trực tiếp.

← Tất cả hướng dẫn · Nhúng GIF vào GitHub README →