How to Record a Terminal GIF

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

1. Ön Koşullar

Terminal GIF'lerini kaydetmek için şunlara ihtiyacınız var:

VHS — a terminal recorder by Charm that converts scripted terminal sessions into GIFs
ttyd — bir terminal web sunucusu (VHS bağımlılığı, macOS'ta otomatik olarak kurulur)
ffmpeg — video kodlama için (macOS'ta otomatik olarak kurulur)

VHS, tuş vuruşlarını, komutları ve zamanlamayı tanımlayan bir .tape dosyasını okuyarak çalışır — ardından bu eylemleri sanal bir terminalde tekrar oynatır ve çıktıyı GIF olarak yakalar.

2. VHS Kur

Platform	Kurulum Komutu
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`

Kurulumu doğrulayın:

vhs --version

3. Tape Dosyası Oluştur

Tape dosyası, VHS'ye ne yazacağını, ne zaman bekleyeceğini ve hangi ayarları kullanacağını söyleyen düz metin bir betiktir. demo.tape adında bir dosya oluşturun:

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

Temel Komutlar

Komut	Açıklama	Örnek
`Output`	Çıktı dosya yolunu ayarla	`Output "demo.gif"`
`Type`	Metin yaz (tuş vuruşlarını simüle eder)	`Type "git status"`
`Enter`	Enter'a bas	`Enter`
`Sleep`	Belirli bir süre bekle	`Sleep 2s`
`Ctrl+C`	Klavye kısayolu gönder	`Ctrl+C`
`Hide`	Kaydı durdur (kurulum için)	`Hide`
`Show`	Kaydı devam ettir	`Show`

4. Ayarları Yapılandır

Set komutlarını tape dosyanızın başına, herhangi bir Type komutundan önce yerleştirin.

AgentGIF için Önerilen Ayarlar

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üm Mevcut Ayarlar

Ayar	Varsayılan	Açıklama
`Shell`	`"bash"`	Kullanılacak kabuk (bash, zsh, fish, sh)
`FontSize`	`14`	Piksel cinsinden yazı tipi boyutu
`Width`	`800`	Piksel cinsinden terminal genişliği
`Height`	`600`	Piksel cinsinden terminal yüksekliği
`Padding`	`0`	Terminal etrafındaki dolgu
`Theme`	`"default"`	Color theme (see theme gallery)
`TypingSpeed`	`50ms`	Tuş vuruşları arasındaki gecikme
`Framerate`	`50`	Saniye başına GIF karesi
`PlaybackSpeed`	`1`	Oynatma hızı çarpanı
`CursorBlink`	`true`	Yanıp sönen imleci göster
`LetterSpacing`	`0`	Ek harf aralığı
`LineHeight`	`1.0`	Satır yüksekliği çarpanı

Temalar

VHS, 44 yerleşik temayla birlikte gelir. Geliştirici dokümantasyonu için popüler seçenekler:

Tema	Stil
Catppuccin Mocha	Sıcak koyu (pastel vurgular)
Dracula	Koyu mor
Tokyo Night	Mavi tonlu koyu
Nord	Arktik mavi
One Dark	Atom ilhamlı koyu
Solarized Dark	Sıcak tonlu klasik koyu
Monokai	Sublime Text ilhamlı

Canlı önizlemelerle tüm temalara göz atın: Tema Galerisi.

5. GIF'i Kaydet

vhs demo.tape

VHS başsız bir tarayıcı açar, tape'i tekrar oynatır ve GIF'i kaydeder. Tipik kayıt 10-30 saniye sürer.

Yüklemeden önce önizleyin:

# macOS
open demo.gif

# Linux
xdg-open demo.gif

6. Dosya Boyutunu Optimize Et

AgentGIF 10 MB'a kadar GIF kabul eder, ancak daha küçük dosyalar daha hızlı yüklenir. GIF boyutunu küçük tutmak için ipuçları:

Teknik	Etki
Boyutları azaltın (`Width 800`)	Belirgin — genişliği yarıya indirmek dosya boyutunu dörtte bire düşürür
Kare hızını düşürün (`Framerate 30`)	Orta — kareleri %40 azaltır
Daha kısa kayıt	Belirgin — 5-15 saniyeyi hedefleyin
`PlaybackSpeed 1.5` kullanın	Orta — daha az toplam kare
İmleç yanıp sönmesini devre dışı bırakın (`CursorBlink false`)	Küçük — daha az benzersiz kare
Düz arka plan (saydamlıktan kaçının)	Küçük — daha iyi GIF sıkıştırması

Kalite ve boyut arasında en iyi denge için, yukarıdaki önerilen ayarlar 10 saniyelik bir kayıt için yaklaşık 100-300 KB boyutunda GIF'ler üretir.

7. AgentGIF'e Yükle

CLI ile yükleyin (en hızlı):

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.

Bir cast dosyası eklemek yapay zeka ajanı katmanını etkinleştirir:

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

8. Gelişmiş Tape Özellikleri

Kurulum için Gizle/Göster

Kurulum komutlarını kaydetmeden çalıştırmak için Hide/Show kullanın:

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

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

Birden Fazla Çıktı Formatı

VHS aynı anda birden fazla formatta çıktı verebilir:

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

Ortam Değişkenleri

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

Klavye Kısayolları

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

9. Alternatif Kayıt Araçları

Araç	Çıktı	Artıları	Eksileri
VHS	GIF, MP4, WebM	Betiklenmiş, yeniden üretilebilir, temalar	Kurulum gerektirir
asciinema	.cast	Canlı kayıt, küçük dosyalar	GIF çıktısı yok (dönüştürme gerekir)
Terminalizer	GIF	Canlı kayıt, YAML yapılandırması	Büyük dosya boyutları
Peek	GIF, WebM	GUI ekran kaydedicisi	Terminale özgü değil

Betiklenmiş demolar (yeniden üretilebilir, sürüm kontrollü) için VHS'yi ve canlı kayıtlar için asciinema + VHS dönüştürmesini öneriyoruz.

← Tüm Kılavuzlar · GitHub README'ye GIF Göm →