Создание анимаций командной строки
Коротко об инструменте
Вы вставляете сценарий сессии — команды и их вывод построчно, — а страница проигрывает его так, будто текст набирают вживую, и отдаёт готовую разметку. Такой блок ставят на лендинг разработческого инструмента вместо скриншота, в презентацию, где нужно показать команду установки, или в демо к статье. Копия HTML/CSS вставляется в страницу, копия ANSI — в скрипт, который печатает цветной вывод в настоящую консоль. Смотрите также: покадровый редактор ASCII-анимации, крупная ASCII-надпись для заставки, логотип в виде ASCII-символов.
Живой набор — это примерно 40-70 мс на символ, и значение по умолчанию 50 попадает в этот диапазон. Медленнее 100 мс зритель начинает скучать на длинных строках, быстрее 20 мс эффект превращается в мгновенную вставку. Для длинного сценария лучше держать 30-40 мс и сократить сам текст.
HTML/CSS — это готовый фрагмент разметки со стилями анимации, он предназначен для веб-страницы. ANSI — та же строка с управляющими escape-последовательностями цвета, которую понимают bash, PowerShell и большинство эмуляторов терминала. В браузере ANSI-коды не отрисуются, в консоли не отрисуется HTML.
Он помечен в списке как «Скоро» — это заглушка, а не рабочий режим. Реально работают два эффекта: посимвольная печать и мгновенный вывод. Если нужен именно глитч, добейтесь его в CSS уже на своей странице поверх скопированной разметки.
Да, поле принимает кириллицу, эмодзи и псевдографику вроде ✔ и ─. Учтите только, что в скопированном виде текст рассчитан на моноширинный шрифт: если на вашей странице у блока стоит обычный шрифт, колонки таблиц и рамки поедут. Шрифт задаётся в скопированном CSS, не удаляйте эту строку.
Скопируйте HTML/CSS и положите разметку в то место страницы, где должен стоять терминал, а стили — в общий файл стилей или в тег . Никаких скриптов и внешних зависимостей подключать не нужно: анимация набора построена на CSS, поэтому блок работает и на статическом сайте, и внутри готового шаблона.
Экспорта в файл здесь нет — инструмент отдаёт код. Чтобы получить ролик, запустите анимацию и снимите её экранной записью либо соберите движение покадрово в соседнем ASCII-редакторе, где есть выгрузка в GIF и видео.
До: $ npm i -g my-cli + [email protected] $ my-cli init ✔ Проект создан
После: Тема Matrix Green, 50 мс на символ: четыре строки печатаются примерно за три секунды и уходят в цикл.
До: OK build passed FAIL 2 tests
После: Копировать ANSI: \u001b[32mOK\u001b[0m build passed / \u001b[31mFAIL\u001b[0m 2 tests — цвета видны в любом терминале.
Оценка и фидбек помогают понять, что улучшать дальше.
