Empty state examples in animated ASCII

What makes a good empty state design

A good empty state answers three questions in a few seconds: what happened, why the screen is empty, and what to do next. The illustration sets the tone, the headline names the situation, and one clear action moves the user forward.

Match the emotion to the moment. A first-run screen should feel welcoming, a success should feel like a small reward, and an error should stay calm and helpful. Motion helps when it tells the story: a tick that draws itself or a door that swings open explains the moment faster than a still icon.

• First use: explain the value and offer the first action, as Cobweb Empty Folder and Welcome Door Opening do.
• User cleared it: celebrate the finish, as All Caught Up Check and Task Done Confetti do.
• Something went wrong: say what failed and how to retry, as Unplugged Offline Cable and Rate Limit Hourglass do.

Which empty state illustration for which moment

Pick by the job the screen has to do. Each name below is a piece in this category, ready to drop into the embed tag.

• No results page: No Search Results.
• Inbox zero or no notifications: Empty Inbox Plane, All Caught Up Check.
• Offline or unstable network: Unplugged Offline Cable, Reconnecting Signal Bars, Broken Link Cloud.
• Server errors: Smoking Server Box.
• Too many requests: Rate Limit Hourglass.
• Signed out or blocked: Session Expired Clock, Access Denied Padlock.
• Checkout: Payment Success Card, Payment Declined Shake.
• Saving, uploading and copying: Saved To Cloud Tick, Upload Into Tray, Copied To Clipboard.
• Deleting with undo: Trash Lid Closing.
• Onboarding and milestones: Onboarding Flag Planted, Welcome Door Opening.
• Not built yet: Coming Soon Rocket, Construction Crane Panel.

Editing the message inside an empty state

Many of these illustrations include short text, such as a search query that found nothing, a rate limit notice or a coming soon line. That text lives in plain strings in the piece's code, which you can read in the Source section of its page. Copy the file and its small kit.js helper into your project, change the strings, and keep them close to the original length, since each piece is laid out on a fixed grid of 56 to 62 columns.

Keep the real message in your own HTML too. Put the headline and the action button next to the art as normal text, so screen readers and translation tools can reach them. The embed labels itself with the piece name and shows a still frame to anyone who prefers reduced motion.

Using animated empty states in React and Vue apps

The simplest route is the embed tag, which works in any framework because ascii-art is a standard custom element. Load the ascii.js script once, then render <ascii-art piece="empty-no-results"><ASCII library-art> wherever the empty state appears. In Vue, mark ascii-art as a custom element in the compiler options so Vue does not try to resolve it as a component.

For React, the React tab on each piece page gives a small component: copy the piece file and kit.js into your project, import it, and it draws frames into a pre element. That route needs no extra network request and lets you edit the message. When your data arrives, unmount the component and the animation stops with it.