ascii.rest adds animated ASCII art to a web page in one tag

A landing page that wants a small animated detail usually reaches for a Lottie file or an animated GIF, both of which arrive as image bytes and often shift the layout while they load. ascii.rest, a TypeScript library posted to GitHub by a developer who writes as Shubham, replaces those files with 217 animated ASCII pieces that render as text and drop into a page in a single tag.

The repository at bas3line/ascii was created on 7 October 2026 under an MIT licence. The GitHub API reports 661 stars and 37 forks, with the last push on 9 October. The author's description reads "Animated ascii art for web pages, in TypeScript: React, Next.js, Astro, or one HTML tag."

What the library ships

The pieces cover scenes, loaders, charts, forms, programming language logos, Linux distribution logos, 3D shapes, physics simulations, creatures and generative art. The README groups them into categories and lists 217 in total. Fifteen of them are full-colour scenes rendered to a canvas, and the rest are plain text that render into a <pre> block.

Three framework paths are listed. In React and Next.js, a piece is a client component imported by name. In Astro, the first frame is rendered on the server, so the page loads with the shape already in place and the script takes over on hydration. In plain HTML, a single <ascii-art piece="donut"></ascii-art> tag works after one script include from a CDN, with no build step. A fourth path is a Node command that plays a piece in a 24-bit colour terminal.

What it costs to adopt

The library is MIT and has zero required dependencies. Node is only needed for the terminal command. The author mentions one optional font, "ascii.rest mono" at three kilobytes, that the library loads from a CDN on systems whose default monospace lacks box-drawing glyphs. Without that font, a few of the heavier scenes fall back to a less dense character set.

Two defaults matter to a team worried about accessibility. The library reads the viewer's prefers-reduced-motion setting and holds a static first frame when the setting is on. And a piece renders into real DOM text, so a screen reader is given something to say rather than an unlabelled image.

Where it fits

The practical case for ascii.rest is a hero that needs a small moving detail without buying a Lottie animation, an animated banner on a changelog entry, or a loader that reads as a terminal thinking rather than a spinning circle. The site that lists the pieces is at ascii.rest.

ASCII looks the same on every brand, so a piece that fits a developer tool will look generic on a shop that sells shoes. The compensating gain is weight. A page can carry a scene in a few lines of HTML and a small TypeScript bundle, with no image asset, no decoder, and no layout shift while the asset loads.

Source

• Shubham (bas3line): bas3line/ascii on GitHub
• Project site: ascii.rest