ascii.rest es una librería de arte ASCII animado (ascii art) con 191 piezas gratis y licencia MIT que agregas a cualquier página con una sola etiqueta HTML, o importas como componente en React, Next.js y Astro. Incluye escenas, loaders, gráficos, logos de lenguajes, distros de Linux, figuras 3D y simulaciones de física, todo en TypeScript, sin dependencias y sin paso de build.
El proyecto, del desarrollador Shubham (@bas3line), llegó a la portada de Hacker News el 7 de octubre con 162 puntos. En el README, el autor lo presenta como una forma de darle un poco de movimiento a sitios minimalistas de estilo terminal sin renunciar a la estética de texto plano.
¿Qué dibujos ASCII incluye?
Las 191 piezas están organizadas en 14 categorías en el sitio:
| Categoría | Piezas | Ejemplos |
|---|---|---|
| Escenas (a todo color) | 13 | aurora fjord, kyoto dusk, earthrise |
| UI | 12 | spinners, progress bar, terminal, skeleton, not found |
| Datos | 10 | bar chart, sparkline, gauge, heatmap, uptime bar |
| Tipografía | 9 | typewriter, glitch, scramble, split-flap, big text |
| Logos de lenguajes | 27 | rust, go, python, typescript, zig |
| Distros de Linux | 22 | arch linux, debian, nixos, ubuntu |
| Figuras | 12 | donut, cube, tesseract, torus knot |
| Espacio | 11 | black hole, solar system, three-body |
| Física | 14 | double pendulum, falling sand, lorenz attractor |
| Naturaleza | 16 | campfire, bonsai, snowfall, fractal tree |
| Criaturas | 10 | cat, fox, jellyfish, whale |
| Objetos | 14 | analog clock, lava lamp, vinyl, train |
| Generativo | 13 | mandelbrot, langton’s ant, rule 30, voronoi |
| Efectos | 8 | matrix rain, doom fire, synthwave, tunnel |
Ahí están también el famoso ascii donut que gira y el matrix rain.
Cada pieza tiene su propia página en ascii.rest (por ejemplo, ascii.rest/donut/), donde puedes verla en movimiento antes de usarla.
¿Sirve como loader o spinner?
Sí. Las categorías de UI y datos son las más prácticas del catálogo. Un spinner ASCII, una barra de progreso, un skeleton, un sparkline o una página 404 encajan en un blog técnico, un sitio de documentación o un dashboard con aspecto de terminal.
Se usan igual que cualquier otra pieza, por su nombre:
<ascii-art piece="spinners"></ascii-art>
¿Cómo agregar arte ASCII animado a una página HTML?
Necesitas un script y una etiqueta:
<script type="module" src="https://ascii.rest/ascii.js"></script>
<ascii-art piece="donut"></ascii-art>
ascii.js define el custom element <ascii-art>, carga la pieza y la reproduce solo mientras está visible en pantalla.
El elemento se estiliza como si fuera texto:
ascii-art { font-size: 10px; color: teal; }
Según el README, la etiqueta acepta estos atributos:
| Atributo | Qué hace |
|---|---|
piece |
El nombre de la pieza: donut, night-coast |
src |
La URL de cualquier módulo que cumpla el contrato de pieza |
fps |
Cambia la tasa de cuadros |
options |
JSON que sobrescribe los valores por defecto: '{"text":"hello"}' |
label |
Lo que muestra, para lectores de pantalla |
mono |
Dibuja una pieza a color en una sola tinta, la del texto |
Los logos y las distros vienen en sus propios colores. Agrega mono (<ascii-art piece="rust" mono>) para dibujarlos en el color de tu texto.
¿Cómo usar ascii art en React o Next.js?
Instala el paquete desde GitHub e importa el componente:
// npm install github:bas3line/ascii
import { Ascii } from "ascii.rest/react";
import { donut } from "ascii.rest/pieces";
<Ascii piece={donut} />
<Ascii piece="night-coast" /> // fetched by name when it mounts
<Ascii piece={donut} options={{ fps: 12 }} className="art" />
<Ascii piece="rust" mono /> // a logo in one ink
Ascii es un client component ("use client"), así que funciona tal cual en el App Router de Next.js.
Si pasas el módulo importado, la pieza se incluye en tu bundle. Si pasas el nombre como texto, se descarga solo cuando el componente se monta.
Las piezas de texto se dibujan en un <pre>. Las piezas a color (escenas, logos y distros) se dibujan en un <canvas> tan ancho como su contenedor, o en un <pre> en una sola tinta si agregas mono.
Al momento de publicar esta nota, ascii.rest no está en el registro de npm. El paquete se instala directamente desde el repositorio de GitHub con el nombre ascii.rest y se compila solo durante la instalación.
¿Cómo usar arte ASCII en Astro?
---
import Ascii from "ascii.rest/astro";
---
<Ascii piece="donut" />
<Ascii piece="big-text" options={{ text: "hello" }} class="banner" />
El componente de Astro renderiza el primer cuadro en el servidor, así que la página está completa antes de que se ejecute JavaScript. La animación arranca cuando la página termina de cargar.
¿Se puede usar sin framework, desde TypeScript?
Sí. mount reproduce una pieza en cualquier elemento y devuelve una función para detenerla:
import { mount } from "ascii.rest";
import { donut } from "ascii.rest/pieces";
const stop = mount(document.querySelector("pre")!, donut, { fps: 12 });
Usa un <pre> para las piezas de texto y un <canvas> para las de color. canvas.has(name) te dice cuál necesita cada pieza. La librería exporta además estas funciones auxiliares:
load["night-coast"]()importa cualquier pieza por su nombre.nameslista todas las piezas.isPiece(name)valida que un texto sea un nombre de pieza existente.
Todas las piezas, opciones y cuadros están tipados.
¿El tag HTML depende de ascii.rest en producción?
Sí. La vía sin build descarga cada pieza desde ascii.rest cuando se carga tu página. Para un sitio personal, una demo o un prototipo no hay problema. En producción, significa que tu animación depende de un servidor que no controlas.
Para producción, instala el paquete y define la etiqueta desde tu propio bundle:
import "ascii.rest/element";
Eso registra el mismo elemento <ascii-art>, pero servido desde tu build.
Hay un detalle más si lo usas en React. Muchas piezas usan caracteres de dibujo de cajas y bloques (─ │ ╭ █ ▄ ░) que algunas fuentes del sistema no tienen, sobre todo en Android. La etiqueta HTML y el componente de Astro cargan un subconjunto de 3 KB de JetBrains Mono desde ascii.rest solo cuando el navegador lo necesita. En React tienes que agregar esa fuente a la pila de tu <pre>; el README incluye el bloque @font-face.
¿Respeta el movimiento reducido?
Sí, por defecto. Si el lector tiene activado prefers-reduced-motion, cada pieza se queda en su primer cuadro en lugar de animarse.
mount acepta motion: true para anular ese comportamiento. El README recomienda usarlo solo detrás de un control que elija el propio lector, como el botón [play anyway] del sitio.
El atributo y la prop label definen lo que anuncian los lectores de pantalla. Por defecto, es el nombre de la pieza.
¿Es gratis ascii.rest?
Sí. El código y las 191 piezas tienen licencia MIT, así que puedes usarlas y modificarlas también en proyectos comerciales. Los logos de lenguajes y distros provienen de devicon (MIT) y Simple Icons (CC0). Siguen siendo marcas registradas de sus dueños y se muestran solo para identificar el lenguaje o la distribución. El autor agradece un enlace de vuelta si lo usas, pero no es obligatorio.
Funciona en cualquier navegador actual con soporte de módulos ES, custom elements e IntersectionObserver. Las piezas a color necesitan además ResizeObserver. Importar los módulos en un servidor para renderizado del lado del servidor es seguro, porque nada toca el DOM hasta que se monta una pieza.
¿Y tú? ¿Dónde pondrías una animación ASCII en tu sitio: en una página 404, en un loader o en la portada de tu portafolio?
- Un loader o spinner
- Una página 404
- La portada de mi blog o portafolio
- Prefiero otra opción (cuéntanos cuál)
Comenta abajo o, si este artículo te llegó por correo, responde directamente al email: tu respuesta se publica aquí.
Relacionado: Crear animaciones web increíbles en Three.js con GSAP