How to Record a Terminal GIF

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

1. ข้อกำหนดเบื้องต้น

ในการบันทึก terminal GIFs คุณต้องการ:

VHS — a terminal recorder by Charm that converts scripted terminal sessions into GIFs
ttyd — เว็บเซิร์ฟเวอร์ terminal (การพึ่งพา VHS ติดตั้งอัตโนมัติบน macOS)
ffmpeg — สำหรับการเข้ารหัสวิดีโอ (ติดตั้งอัตโนมัติบน macOS)

VHS ทำงานโดยอ่านไฟล์ .tape ที่อธิบายการกดแป้น คำสั่ง และเวลา — จากนั้นเล่นซ้ำการกระทำเหล่านั้นใน terminal เสมือนและจับภาพ output เป็น GIF

2. ติดตั้ง VHS

แพลตฟอร์ม	คำสั่งติดตั้ง
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`

ตรวจสอบการติดตั้ง:

vhs --version

3. สร้างไฟล์ Tape

ไฟล์ tape คือสคริปต์ข้อความธรรมดาที่บอก VHS ว่าจะพิมพ์อะไร เมื่อไหร่ที่จะรอ และการตั้งค่าใดที่จะใช้ สร้างไฟล์ชื่อ 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

คำสั่งหลัก

คำสั่ง	คำอธิบาย	ตัวอย่าง
`Output`	กำหนดเส้นทางไฟล์ output	`Output "demo.gif"`
`Type`	พิมพ์ข้อความ (จำลองการกดแป้น)	`Type "git status"`
`Enter`	กด Enter	`Enter`
`Sleep`	รอระยะเวลาหนึ่ง	`Sleep 2s`
`Ctrl+C`	ส่งทางลัดแป้นพิมพ์	`Ctrl+C`
`Hide`	หยุดบันทึก (สำหรับการตั้งค่า)	`Hide`
`Show`	ดำเนินการบันทึกต่อ	`Show`

4. กำหนดค่าการตั้งค่า

วางคำสั่ง Set ที่ด้านบนของไฟล์ tape ของคุณ ก่อนคำสั่ง Type ใดๆ

การตั้งค่าที่แนะนำสำหรับ 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

การตั้งค่าทั้งหมดที่ใช้ได้

การตั้งค่า	ค่าเริ่มต้น	คำอธิบาย
`Shell`	`"bash"`	Shell ที่ใช้ (bash, zsh, fish, sh)
`FontSize`	`14`	ขนาดฟอนต์เป็นพิกเซล
`Width`	`800`	ความกว้าง terminal เป็นพิกเซล
`Height`	`600`	ความสูง terminal เป็นพิกเซล
`Padding`	`0`	Padding รอบ terminal
`Theme`	`"default"`	Color theme (see theme gallery)
`TypingSpeed`	`50ms`	ช่วงเวลาระหว่างการกดแป้น
`Framerate`	`50`	เฟรมต่อวินาทีของ GIF
`PlaybackSpeed`	`1`	ตัวคูณความเร็วการเล่น
`CursorBlink`	`true`	แสดงเคอร์เซอร์กะพริบ
`LetterSpacing`	`0`	ระยะห่างตัวอักษรเพิ่มเติม
`LineHeight`	`1.0`	ตัวคูณความสูงบรรทัด

ธีม

VHS มาพร้อมธีม 44 แบบที่มีอยู่แล้ว ตัวเลือกยอดนิยมสำหรับเอกสารนักพัฒนา:

ธีม	สไตล์
Catppuccin Mocha	มืดอุ่น (สี pastel)
Dracula	ม่วงมืด
Tokyo Night	มืดโทนน้ำเงิน
Nord	น้ำเงินอาร์กติก
One Dark	มืดแรงบันดาลใจจาก Atom
Solarized Dark	มืดคลาสสิกพร้อมโทนอุ่น
Monokai	แรงบันดาลใจจาก Sublime Text

เรียกดูธีมทั้งหมดพร้อมตัวอย่างสด: Theme Gallery

5. บันทึก GIF

vhs demo.tape

VHS เปิดเบราว์เซอร์ headless เล่น tape ซ้ำ และบันทึก GIF การบันทึกทั่วไปใช้เวลา 10-30 วินาที

ดูตัวอย่างก่อนอัปโหลด:

# macOS
open demo.gif

# Linux
xdg-open demo.gif

6. ปรับแต่งขนาดไฟล์

AgentGIF รับ GIFs สูงสุด 10 MB แต่ไฟล์ขนาดเล็กกว่าโหลดเร็วกว่า เคล็ดลับในการรักษาขนาด GIF:

เทคนิค	ผลกระทบ
ลดขนาด (`Width 800`)	มีนัยสำคัญ — การลดความกว้างครึ่งหนึ่งทำให้ขนาดไฟล์เหลือหนึ่งในสี่
ลด framerate (`Framerate 30`)	ปานกลาง — ลดเฟรม 40%
การบันทึกที่สั้นกว่า	มีนัยสำคัญ — ตั้งเป้า 5-15 วินาที
ใช้ `PlaybackSpeed 1.5`	ปานกลาง — เฟรมรวมน้อยลง
ปิดการกะพริบเคอร์เซอร์ (`CursorBlink false`)	เล็กน้อย — เฟรมที่ไม่ซ้ำน้อยลง
พื้นหลังทึบ (หลีกเลี่ยงความโปร่งใส)	เล็กน้อย — การบีบอัด GIF ที่ดีกว่า

สำหรับความสมดุลที่ดีที่สุดระหว่างคุณภาพและขนาด การตั้งค่าที่แนะนำด้านบนผลิต GIFs ประมาณ 100-300 KB สำหรับการบันทึก 10 วินาที

7. อัปโหลดไปยัง AgentGIF

อัปโหลดผ่าน CLI (เร็วที่สุด):

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.

การรวมไฟล์ cast จะเปิดใช้งานชั้น AI agent:

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

8. ฟีเจอร์ Tape ขั้นสูง

ซ่อน/แสดงสำหรับการตั้งค่า

ใช้ Hide/Show เพื่อเรียกใช้คำสั่งตั้งค่าโดยไม่บันทึก:

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

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

รูปแบบ Output หลายแบบ

VHS สามารถ output หลายรูปแบบพร้อมกัน:

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

Environment Variables

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

ทางลัดแป้นพิมพ์

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

9. เครื่องมือบันทึกทางเลือก

เครื่องมือ	Output	ข้อดี	ข้อเสีย
VHS	GIF, MP4, WebM	ตามสคริปต์ ทำซ้ำได้ มีธีม	ต้องตั้งค่า
asciinema	.cast	บันทึกสด ไฟล์ขนาดเล็ก	ไม่มี GIF output (ต้องแปลง)
Terminalizer	GIF	บันทึกสด YAML config	ขนาดไฟล์ใหญ่
Peek	GIF, WebM	โปรแกรมบันทึกหน้าจอ GUI	ไม่เฉพาะสำหรับ terminal

เราแนะนำ VHS สำหรับ demos ตามสคริปต์ (ทำซ้ำได้ ควบคุมเวอร์ชันได้) และการแปลง asciinema + VHS สำหรับการบันทึกสด

← คู่มือทั้งหมด · Embed GIFs ใน GitHub README →