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 GIF रिकॉर्ड करने के लिए, आपको चाहिए:

VHS — a terminal recorder by Charm that converts scripted terminal sessions into GIFs
ttyd — एक terminal web server (VHS निर्भरता, macOS पर स्वचालित रूप से स्थापित)
ffmpeg — वीडियो encoding के लिए (macOS पर स्वचालित रूप से स्थापित)

VHS एक .tape फ़ाइल पढ़कर काम करता है जो keystrokes, कमांड और टाइमिंग का वर्णन करती है — फिर यह उन क्रियाओं को एक virtual terminal में replay करता है और आउटपुट को 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 "demo.gif"`
`Type`	पाठ टाइप करें (keystrokes का अनुकरण)	`Type "git status"`
`Enter`	Enter दबाएं	`Enter`
`Sleep`	एक अवधि के लिए प्रतीक्षा करें	`Sleep 2s`
`Ctrl+C`	कीबोर्ड शॉर्टकट भेजें	`Ctrl+C`
`Hide`	रिकॉर्डिंग रोकें (सेटअप के लिए)	`Hide`
`Show`	रिकॉर्डिंग फिर शुरू करें	`Show`

4. सेटिंग कॉन्फ़िगर करें

किसी भी Type कमांड से पहले, अपनी tape फ़ाइल के शीर्ष पर Set कमांड रखें।

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`	pixels में फ़ॉन्ट आकार
`Width`	`800`	pixels में terminal चौड़ाई
`Height`	`600`	pixels में terminal ऊंचाई
`Padding`	`0`	terminal के चारों ओर padding
`Theme`	`"default"`	Color theme (see theme gallery)
`TypingSpeed`	`50ms`	keystrokes के बीच देरी
`Framerate`	`50`	GIF frames प्रति सेकंड
`PlaybackSpeed`	`1`	प्लेबैक गति गुणक
`CursorBlink`	`true`	ब्लिंकिंग कर्सर दिखाएं
`LetterSpacing`	`0`	अतिरिक्त अक्षर अंतराल
`LineHeight`	`1.0`	पंक्ति ऊंचाई गुणक

थीम

VHS 44 बिल्ट-इन थीम के साथ आता है। डेवलपर दस्तावेज़ीकरण के लिए लोकप्रिय विकल्प:

थीम	स्टाइल
Catppuccin Mocha	गर्म डार्क (pastel accents)
Dracula	डार्क बैंगनी
Tokyo Night	नीले रंग का डार्क
Nord	आर्कटिक नीला
One Dark	Atom-प्रेरित डार्क
Solarized Dark	गर्म टोन के साथ क्लासिक डार्क
Monokai	Sublime Text-प्रेरित

लाइव पूर्वावलोकन के साथ सभी थीम ब्राउज़ करें: थीम गैलरी।

5. GIF रिकॉर्ड करें

vhs demo.tape

VHS एक headless ब्राउज़र खोलता है, tape replay करता है और GIF सहेजता है। सामान्य रिकॉर्डिंग में 10-30 सेकंड लगते हैं।

अपलोड करने से पहले पूर्वावलोकन करें:

# macOS
open demo.gif

# Linux
xdg-open demo.gif

6. फ़ाइल आकार अनुकूलित करें

AgentGIF 10 MB तक GIF स्वीकार करता है, लेकिन छोटी फ़ाइलें तेज़ी से लोड होती हैं। GIF आकार कम रखने के सुझाव:

तकनीक	प्रभाव
आयाम कम करें (`Width 800`)	महत्वपूर्ण — चौड़ाई आधी करने से फ़ाइल आकार एक-चौथाई हो जाता है
कम framerate (`Framerate 30`)	मध्यम — frames 40% कम करता है
छोटी रिकॉर्डिंग	महत्वपूर्ण — 5-15 सेकंड का लक्ष्य रखें
`PlaybackSpeed 1.5` उपयोग करें	मध्यम — कुल frames कम
कर्सर blink अक्षम करें (`CursorBlink false`)	छोटा — अद्वितीय frames कम
ठोस पृष्ठभूमि (transparency से बचें)	छोटा — बेहतर GIF compression

गुणवत्ता और आकार के सर्वोत्तम संतुलन के लिए, ऊपर अनुशंसित सेटिंग 10-सेकंड रिकॉर्डिंग के लिए लगभग 100-300 KB GIF उत्पन्न करती हैं।

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/Show का उपयोग करें:

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

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

एकाधिक आउटपुट प्रारूप

VHS एक साथ कई प्रारूप आउटपुट कर सकता है:

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

पर्यावरण चर

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. वैकल्पिक रिकॉर्डिंग टूल

टूल	आउटपुट	फायदे	नुकसान
VHS	GIF, MP4, WebM	Scripted, पुनरुत्पादन योग्य, थीम	सेटअप आवश्यक है
asciinema	.cast	लाइव रिकॉर्डिंग, छोटी फ़ाइलें	कोई GIF आउटपुट नहीं (रूपांतरण आवश्यक)
Terminalizer	GIF	लाइव रिकॉर्डिंग, YAML config	बड़े फ़ाइल आकार
Peek	GIF, WebM	GUI स्क्रीन रिकॉर्डर	Terminal-विशिष्ट नहीं

हम scripted demo के लिए VHS (पुनरुत्पादन योग्य, version-controllable) और लाइव रिकॉर्डिंग के लिए asciinema + VHS conversion की अनुशंसा करते हैं।

← सभी गाइड · GitHub README में GIF embed करें →