Создание анимаций командной строки
Tool guide
You paste a session script — commands and their output, line by line — and the page replays it as if someone were typing, then hands you the markup. Blocks like this replace a screenshot on a developer tool's landing page, show an install command in a deck, or illustrate an article. The HTML/CSS copy drops into a page; the ANSI copy goes into a script that prints coloured output to a real console. See also: frame-by-frame ASCII animation editor, a large ASCII headline for the intro, your logo rendered in ASCII characters.
Real typing sits around 40-70 ms per character, and the default of 50 lands right in that band. Slower than 100 ms and viewers get bored on long lines; faster than 20 ms and it reads as an instant paste. For a long script, keep 30-40 ms and shorten the text instead.
The HTML/CSS copy is a markup fragment plus the animation styles, meant for a web page. The ANSI copy is the same text with colour escape sequences that bash, PowerShell and most terminal emulators understand. Browsers will not render ANSI codes, and a console will not render HTML.
It is labelled as coming soon in the effect list and is a placeholder rather than a working mode. Two effects actually run: character-by-character typing and instant output. If you want a glitch look, add it in CSS on your own page over the copied markup.
Yes, the input accepts any Unicode, including box-drawing characters and check marks. Just remember the copied block relies on a monospaced font: if your page overrides it with a proportional one, tables and frames will drift. The font is set in the copied CSS, so keep that rule.
Copy the HTML/CSS, drop the markup where the terminal should appear and put the styles in your stylesheet or a tag. There is nothing else to load: the typing animation is pure CSS, so the block works on a static site or inside an existing template.
Not from here — this tool outputs code. To get a clip, run the animation and screen-record it, or rebuild the motion frame by frame in the ASCII animation editor, which does export GIF and video.
Before: $ npm i -g my-cli + [email protected] $ my-cli init ✔ Project created
After: Matrix Green at 50 ms per character: the four lines type out in about three seconds, then loop.
Before: OK build passed FAIL 2 tests
After: Copy ANSI gives \u001b[32mOK\u001b[0m build passed / \u001b[31mFAIL\u001b[0m 2 tests — colours show up in any terminal.
Your rating and feedback help decide what to improve next.
