Animated ASCII Art for Web Pages

191 animated ascii pieces for web pages: 13 full-colour scenes like the one above, loaders, charts, type, 27 language logos and 22 Linux distros in colour or one ink, and 3D shapes, physics and creatures. Each is a small, typed TypeScript module with no dependencies, for React, Next.js, Astro, or a plain HTML page, and free to use and change under the MIT license.

No install and no build step. ascii.js defines the tag, loads the piece from ascii.rest, plays it while it is on screen, and holds the first frame for anyone who prefers reduced motion.

A client component, so it works in the Next.js app router as it is. Pass the name instead, piece=“donut”, to fetch the piece only when it mounts.

Renders the first frame on the server, so the page is whole before any script runs, then plays the piece once it loads.

mount plays a piece in a

, or on a  for the coloured ones, and returns a function that stops it. Every piece, option and frame is typed.

View original article