ASCII Magic
Open tool

Terminal UI examples in animated ASCII

These terminal UI examples show software at work, drawn entirely in text and animated: a git log graph growing branches, a debugger stepping through a loop, a test runner printing dots, a cluster rolling out new pods and a command palette filtering as a query is typed. Alongside them are app screens in the same style, from a login form to a kanban board.

74 pieces

View use cases
API Request InspectorUI
Benchmark ResultsUI
Firmware Setup UtilityUI
Bisect HuntUI
Boot SequenceUI
Calculator KeypadUI
Calendar MonthUI
Chat ThreadUI
Checkout Payment FlowUI
Rolling DeploymentUI
Code EditorUI
Color Picker SlidersUI
Command PaletteUI
Compiler WarningsUI
Coverage ReportUI
Data TableUI
Date Range PickerUI
Delivery Route TrackerUI
Dial-Up HandshakeUI
Partition EditorUI
DNS Resolver ChainUI
Download QueueUI
File TreeUI
Profiler Flame GraphUI
Form Validation ErrorsUI
Git Log GraphUI
Heap Allocator MapUI
Debugger SteppingUI
Container Layer PullUI
Inbox ListUI
Infra Plan and ApplyUI
Install LogUI
Kanban BoardUI
Keyboard KeypressUI
Login FormUI
Maintenance ModeUI
Merge Conflict ResolverUI
Modal DialogUI
Modal Editor SessionUI
Request WaterfallUI
Onboarding StepperUI
OTP Code EntryUI
Packet CaptureUI
Lost In Space 404UI
Server Error 500UI
Password Strength MeterUI
Pod AutoscalerUI
Power-On Memory CountUI
Pricing Plan ToggleUI
Process Viewer SortUI
Process Task ManagerUI
Process Tree LiveUI
Progress LoaderUI
Interactive Rebase TodoUI
Relay Chat ChannelUI
Search AutocompleteUI
Settings TogglesUI
Skeleton LoaderUI
Smart Home PanelUI
Spectrum Music PlayerUI
Spinner SetUI
Split Pane MultiplexerUI
Spreadsheet RecalcUI
SQL Query RunnerUI
Secure Shell LoginUI
Star Rating ReviewUI
Tab BarUI
Terminal SessionUI
Test Suite DotsUI
Toast StackUI
Twin Pane CommanderUI
Upload DropzoneUI
Weather City WidgetUI
Window Tiling ManagerUI

Where to start

Use them on product pages, docs and READMEs to show a workflow without screenshots or screen recordings, or as a reference when you design your own text user interface. Each screen embeds with one tag, plays in a real terminal and exports as a GIF or video. Older machines and green phosphor screens have their own page in Retro Computing.

Split Pane MultiplexerA multiplexer split into a server log, a resource meter and a test watcher with focus hopping between panes, a rich TUI design reference and a strong developer hero.Git Log GraphFeature branches merge back into main as new commits land on top, a compact way to show version control in a README, a tutorial or a talk.Command PaletteA palette drops over a dimmed editor and filters commands as a query is typed, ideal for showing off a keyboard-first feature on a product page.Process Task ManagerPer-process CPU and memory numbers churn and rows re-sort by load until a runaway process is ended, the classic full-screen terminal UI of meters and tables.Checkout Payment FlowA checkout fills shipping and card details, processes the payment and lands on a confirmed order, a complete ASCII UI walkthrough for ecommerce explainers and mockups.Firmware Setup UtilityA cursor walks the tabs of a firmware setup screen, enables a setting, reorders boot devices and saves, a nostalgic layout for hardware and systems content.

What a terminal UI is, and what this collection covers

A terminal UI, also called a TUI or text user interface, is an application drawn with characters inside a terminal window: panels made of line characters, lists you move through with the keyboard, meters built from blocks. The pieces here are animations in that style rather than working apps, which makes them easy to show on any web page.

  • Developer tools: Code Editor, Debugger Stepping, Modal Editor Session, Git Log Graph, Bisect Hunt, Interactive Rebase Todo, Merge Conflict Resolver, Test Suite Dots and Compiler Warnings.
  • Systems and operations: Process Viewer Sort, Rolling Deployment, Pod Autoscaler, Infra Plan and Apply, Packet Capture, Partition Editor and Secure Shell Login.
  • App screens: Login Form, Checkout Payment Flow, Kanban Board, Inbox List, Settings Toggles, Calendar Month and Date Range Picker.
  • Firmware and boot: Firmware Setup Utility, Power-On Memory Count and Boot Sequence.

TUI design patterns worth borrowing

Even if you never embed a piece, the screens work as a quick reference for TUI design. A few patterns worth studying frame by frame:

  • Clear focus between panes: Split Pane Multiplexer moves focus from pane to pane, so you always know which one is live.
  • Tables that re-sort in place: Process Viewer Sort slides rows into their new order instead of redrawing, which keeps the eye on what changed.
  • Progress per item: Container Layer Pull gives every layer its own bar, and Download Queue reports size, speed and time left for each file.
  • Errors next to their cause: Compiler Warnings points at the exact snippet, and Form Validation Errors drops each message under its field.
  • One status line that counts: Rolling Deployment keeps a single line counting toward success while pods start and pass readiness.

ASCII UI screens on product pages, docs and wireframes

An animated screen shows the order of a workflow at a glance and weighs a few KB, so it suits places where a video would be heavy. Put SQL Query Runner beside a database feature, Infra Plan and Apply in a deploy guide, or Coverage Report in a testing tutorial. Add the script tag once, then <ascii-art piece="sql-query-runner"><ASCII library-art> where the screen belongs.

For a README, download the GIF, since READMEs do not run scripts. For a quick ASCII wireframe in a design doc or a code review, pause on a frame and press Copy as text: the box drawing pastes as plain text you can edit by hand into your own layout.

Accessibility and motion for UI pieces

Each ascii-art element is announced as an image labeled with the piece name, for example Login Form, animated ASCII art. If the screen explains a step in your docs, set your own aria-label that says what happens, such as: a sign-in form fills in and shows a success tick. Your label replaces the default.

Pieces hold a still frame when a visitor has reduced motion turned on, and they only animate while on screen, so a long docs page with several screens stays light. Do not rely on the animation alone for instructions: write the steps in text beside it, so they can be read, searched and translated.

Ways to use ASCII UI

Step-by-step guides with a live builder and code to copy.

All 18 use cases →
Docs

ASCII art for docs sites and landing pages

Add animated ASCII art to docs and landing pages built with Next.js, Astro, Docusaurus or plain HTML. Diagrams, terminals and heroes that load instantly.

CLI

Splash screens and loaders for command line tools

Give your CLI a startup splash or an animated loader in ASCII. Copy the piece source into your Node project, or print frames from any language.

Loader

ASCII loading spinners and progress bars for websites

Lightweight animated ASCII loaders, spinners and progress bars for web pages. One tag to embed, no images to download, honours reduced motion.

Error page

Animated ASCII art for 404 and error pages

Make a 404 or 500 page people remember with animated ASCII art. Ready-made error pieces plus any scene or creature, embedded with one tag.

/FAQS

ASCII UI: frequently asked questions

Answers about using ASCII UI on websites, in READMEs, in terminals and in exports.

Q. What is a terminal UI?
A terminal UI is an application interface drawn with text characters inside a terminal, using panels, lists, tables and meters instead of graphics. People navigate it with the keyboard. The pieces on this page are animated examples of terminal UIs, from editors and git tools to system monitors, made to embed on web pages.
Q. What is the difference between a TUI and a CLI?
A CLI takes a command and prints output line by line, while a TUI takes over the whole terminal window and redraws a full screen layout that you navigate with keys. Test Suite Dots and Install Log show the CLI style. Process Viewer Sort and Partition Editor show the full-screen TUI style.
Q. Is a text user interface the same as an ASCII UI?
Mostly, yes: both describe interfaces built from characters on a grid instead of pixels. Text user interface usually means a working terminal app, while ASCII UI often means a mockup or illustration drawn in that style. The pieces here are the second kind, animated illustrations of text interfaces you can embed or copy.
Q. Where can I find terminal UI examples for design inspiration?
This page collects animated terminal UI examples you can study frame by frame. Pause any piece on its page to inspect a layout, slow it to half speed to follow a transition, or copy a frame as text to keep as a reference. Split Pane Multiplexer, Packet Capture and Debugger Stepping are dense, well-organized places to start.
Q. Can I use these screens as ASCII wireframes?
Yes, any frame can become a starting wireframe. Pause on the moment you want, press Copy as text, and paste it into a doc, an issue or a code comment, then edit the labels by hand. Login Form, Onboarding Stepper and Pricing Plan Toggle make good bases for common app screens.
Q. Are these real, working terminal apps?
No, they are animations that play out a scripted session, not programs you can type into. The commands, numbers and names are part of the animation, not output from a real system. That makes them safe to show on a public page and easy to restyle with the look options.
Q. How do I add an animated terminal screen to my documentation?
Include the library script once, then add an ascii-art element with the piece's slug where the screen should appear. In a docs site that allows HTML, that is all you need. For a React-based site, use the React tab on the piece page, and for Markdown-only pages, embed the GIF export as an image.
Q. Can I change the text inside a UI piece?
Yes, by editing a copy of its source. Every piece page shows the piece's JavaScript under an MIT license, and the labels and lines of text are plain strings in that file. Copy it along with the small helper file it imports, change the strings, and render it the way the React tab shows.
Q. Is there an ASCII login or checkout screen?
Yes, Login Form fills in an email and password, presses the button and draws a success tick, and Checkout Payment Flow fills shipping and card details before landing on a confirmed order. OTP Code Entry adds a two step verification screen, and Password Strength Meter ticks off each rule as the password grows.
Q. Do these UI pieces play in a real terminal?
Yes, every piece plays in a terminal, in color where it is supported. Run npx --yes https://www.ascii-magic.com/ascii/cli.tgz git-log-graph to watch branches merge in your own shell, or add --frame to print a single screen. The terminal welcome guide shows how to run one when a new shell opens.
Q. Which screens suit a developer portfolio?
Code Editor, Terminal Session and Split Pane Multiplexer make strong portfolio heroes, because they show typing, output and focus at a glance. Git Log Graph suits a projects section, while Profiler Flame Graph or Request Waterfall hint at performance work. The developer portfolio guide has more ideas.
Q. Is there an ASCII 404 or maintenance page?
Yes, Lost In Space 404 shows a big glowing 404 with a lost satellite drifting through stars, Server Error 500 has a smoking server rack with a retry countdown, and Maintenance Mode turns a gear beside a live list of upgrade steps. The 404 pages guide shows how to place one with a link home.

Related categories

All categories