How to Record a Terminal GIF

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

1. Prasyarat

Untuk merekam GIF terminal, Anda membutuhkan:

VHS — a terminal recorder by Charm that converts scripted terminal sessions into GIFs
ttyd — server web terminal (dependensi VHS, diinstal otomatis di macOS)
ffmpeg — untuk encoding video (diinstal otomatis di macOS)

VHS bekerja dengan membaca file .tape yang mendeskripsikan penekanan tombol, perintah, dan waktu — kemudian memutar ulang tindakan tersebut di terminal virtual dan merekam outputnya sebagai GIF.

2. Instal VHS

Platform	Perintah Instalasi
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`

Verifikasi instalasi:

vhs --version

3. Buat File Tape

File tape adalah skrip teks biasa yang memberi tahu VHS apa yang harus diketik, kapan harus menunggu, dan pengaturan apa yang digunakan. Buat file bernama 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

Perintah Inti

Perintah	Deskripsi	Contoh
`Output`	Atur jalur file output	`Output "demo.gif"`
`Type`	Ketik teks (mensimulasikan penekanan tombol)	`Type "git status"`
`Enter`	Tekan Enter	`Enter`
`Sleep`	Tunggu selama durasi tertentu	`Sleep 2s`
`Ctrl+C`	Kirim pintasan keyboard	`Ctrl+C`
`Hide`	Hentikan perekaman (untuk penyiapan)	`Hide`
`Show`	Lanjutkan perekaman	`Show`

4. Konfigurasi Pengaturan

Letakkan perintah Set di bagian atas file tape Anda, sebelum perintah Type mana pun.

Pengaturan yang Direkomendasikan untuk 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

Semua Pengaturan yang Tersedia

Pengaturan	Default	Deskripsi
`Shell`	`"bash"`	Shell yang digunakan (bash, zsh, fish, sh)
`FontSize`	`14`	Ukuran font dalam piksel
`Width`	`800`	Lebar terminal dalam piksel
`Height`	`600`	Tinggi terminal dalam piksel
`Padding`	`0`	Padding di sekitar terminal
`Theme`	`"default"`	Color theme (see theme gallery)
`TypingSpeed`	`50ms`	Jeda antar penekanan tombol
`Framerate`	`50`	Frame per detik GIF
`PlaybackSpeed`	`1`	Pengali kecepatan pemutaran
`CursorBlink`	`true`	Tampilkan kursor berkedip
`LetterSpacing`	`0`	Spasi huruf tambahan
`LineHeight`	`1.0`	Pengali tinggi baris

Tema

VHS hadir dengan 44 tema bawaan. Pilihan populer untuk dokumentasi developer:

Tema	Gaya
Catppuccin Mocha	Gelap hangat (aksen pastel)
Dracula	Ungu gelap
Tokyo Night	Gelap berwarna biru
Nord	Biru Arktik
One Dark	Gelap terinspirasi Atom
Solarized Dark	Gelap klasik dengan nada hangat
Monokai	Terinspirasi Sublime Text

Jelajahi semua tema dengan pratinjau langsung: Galeri Tema.

5. Rekam GIF

vhs demo.tape

VHS membuka browser tanpa tampilan, memutar ulang tape, dan menyimpan GIF. Perekaman biasanya memerlukan 10-30 detik.

Pratinjau sebelum mengunggah:

# macOS
open demo.gif

# Linux
xdg-open demo.gif

6. Optimalkan Ukuran File

AgentGIF menerima GIF hingga 10 MB, tetapi file yang lebih kecil dimuat lebih cepat. Tips untuk menjaga ukuran GIF tetap kecil:

Teknik	Dampak
Kurangi dimensi (`Width 800`)	Signifikan — mengurangi setengah lebar menjadikan ukuran file seperempat
Kurangi framerate (`Framerate 30`)	Sedang — mengurangi frame sebesar 40%
Rekaman lebih pendek	Signifikan — targetkan 5-15 detik
Gunakan `PlaybackSpeed 1.5`	Sedang — total frame lebih sedikit
Nonaktifkan kedipan kursor (`CursorBlink false`)	Kecil — frame unik lebih sedikit
Latar belakang solid (hindari transparansi)	Kecil — kompresi GIF lebih baik

Untuk keseimbangan terbaik antara kualitas dan ukuran, pengaturan yang direkomendasikan di atas menghasilkan GIF sekitar 100-300 KB untuk rekaman 10 detik.

7. Unggah ke AgentGIF

Unggah melalui CLI (tercepat):

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.

Menyertakan file cast mengaktifkan lapisan agen AI:

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

8. Fitur Tape Lanjutan

Sembunyikan/Tampilkan untuk Penyiapan

Gunakan Hide/Show untuk menjalankan perintah penyiapan tanpa merekamnya:

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

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

Beberapa Format Output

VHS dapat menghasilkan beberapa format secara bersamaan:

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

Variabel Lingkungan

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

Pintasan Keyboard

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

9. Alat Perekaman Alternatif

Alat	Output	Kelebihan	Kekurangan
VHS	GIF, MP4, WebM	Terskrip, dapat direproduksi, tema	Memerlukan penyiapan
asciinema	.cast	Perekaman langsung, file kecil	Tidak ada output GIF (perlu konversi)
Terminalizer	GIF	Perekaman langsung, konfigurasi YAML	Ukuran file besar
Peek	GIF, WebM	Perekam layar GUI	Tidak khusus terminal

Kami merekomendasikan VHS untuk demo terskrip (dapat direproduksi, dapat dikontrol versinya) dan konversi asciinema + VHS untuk rekaman langsung.

← Semua Panduan · Sematkan GIF di GitHub README →