How to Record a Terminal GIF

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

1. Предварительные требования

Для записи терминальных GIF вам понадобится:

VHS — a terminal recorder by Charm that converts scripted terminal sessions into GIFs
ttyd — веб-сервер терминала (зависимость VHS, устанавливается автоматически на macOS)
ffmpeg — для кодирования видео (устанавливается автоматически на macOS)

VHS работает путём чтения файла .tape, описывающего нажатия клавиш, команды и тайминг — затем воспроизводит эти действия в виртуальном терминале и захватывает вывод в виде 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`	Ввести текст (симулирует нажатия клавиш)	`Type "git status"`
`Enter`	Нажать Enter	`Enter`
`Sleep`	Подождать заданное время	`Sleep 2s`
`Ctrl+C`	Отправить сочетание клавиш	`Ctrl+C`
`Hide`	Остановить запись (для настройки)	`Hide`
`Show`	Возобновить запись	`Show`

4. Настроить параметры

Размещайте команды Set в начале файла tape, перед любыми командами Type.

Все доступные настройки

Настройка	По умолчанию	Описание
`Shell`	`"bash"`	Оболочка для использования (bash, zsh, fish, sh)
`FontSize`	`14`	Размер шрифта в пикселях
`Width`	`800`	Ширина терминала в пикселях
`Height`	`600`	Высота терминала в пикселях
`Padding`	`0`	Отступ вокруг терминала
`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	Тёплый тёмный (пастельные акценты)
Dracula	Тёмно-фиолетовый
Tokyo Night	Тёмный с синим оттенком
Nord	Арктический синий
One Dark	Тёмный в стиле Atom
Solarized Dark	Классический тёмный с тёплыми тонами
Monokai	В стиле Sublime Text

Просматривайте все темы с живыми предпросмотрами: Галерея тем.

5. Записать GIF

vhs demo.tape

VHS открывает безголовый браузер, воспроизводит tape и сохраняет GIF. Типичная запись занимает 10-30 секунд.

Предпросмотр перед загрузкой:

# macOS
open demo.gif

# Linux
xdg-open demo.gif

6. Оптимизировать размер файла

AgentGIF принимает GIF до 10 МБ, но файлы меньшего размера загружаются быстрее. Советы по уменьшению размера GIF:

Техника	Эффект
Уменьшить размеры (`Width 800`)	Значительный — уменьшение ширины вдвое сокращает размер файла в 4 раза
Снизить частоту кадров (`Framerate 30`)	Умеренный — уменьшает количество кадров на 40%
Более короткая запись	Значительный — стремитесь к 5-15 секундам
Используйте `PlaybackSpeed 1.5`	Умеренный — меньше общее количество кадров
Отключить мигание курсора (`CursorBlink false`)	Небольшой — меньше уникальных кадров
Сплошной фон (избегайте прозрачности)	Небольшой — лучшее сжатие GIF

Для наилучшего баланса качества и размера рекомендуемые настройки выше создают GIF около 100-300 КБ для 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-файла активирует уровень для ИИ-агентов:

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	Сценарный, воспроизводимый, темы	Требует настройки
asciinema	.cast	Запись в реальном времени, маленькие файлы	Нет GIF-вывода (требует конвертации)
Terminalizer	GIF	Запись в реальном времени, конфигурация YAML	Большие размеры файлов
Peek	GIF, WebM	GUI-рекордер экрана	Не специфичен для терминала

Мы рекомендуем VHS для сценарных демо (воспроизводимых, версионируемых) и asciinema + конвертацию VHS для живых записей.

← Все руководства · Встраивание GIF в GitHub README →