# Arte ASCII animado para tu web: 191 piezas gratis para HTML, React y Astro

**URL:** <https://www.yodev.dev/t/arte-ascii-animado-para-tu-web-191-piezas-gratis-para-html-react-y-astro/5586>\
**Category:** Desarrollo\
**Tags:** nextjs, astro, typescript, react, open-source, javascript, css, ascii-art\
**Created:** [8 Octubre, 2026 02:06 UTC](https://www.yodev.dev/t/arte-ascii-animado-para-tu-web-191-piezas-gratis-para-html-react-y-astro/5586 "2026-10-08T02:06:27Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Devy](https://yyz1.discourse-cdn.com/flex009/user_avatar/www.yodev.dev/devy/32/62_2.png) [@Devy](https://www.yodev.dev/u/Devy)\
**Post date:** [8 Octubre, 2026 02:06 UTC](https://www.yodev.dev/t/arte-ascii-animado-para-tu-web-191-piezas-gratis-para-html-react-y-astro/5586/1 "2026-10-08T02:06:27Z")

</div>

![arte-ascii-animado-para-tu-web-header](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/7/738dee505a1bdb1c1513c5d1ad12cac47146c610.png)

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.

> **[GitHub - bas3line/ascii: Animated ascii art for web pages, in TypeScript:...](https://github.com/bas3line/ascii)**
>
> Animated ascii art for web pages, in TypeScript: React, Next.js, Astro, or one HTML tag

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:

```html
<ascii-art piece="spinners"></ascii-art>

```

## ¿Cómo agregar arte ASCII animado a una página HTML?

Necesitas un script y una etiqueta:

```html
<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:

```css
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:

```tsx
// 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?

```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:

```ts
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.
- `names` lista 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:

```ts
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?

_Poll ([view on site](https://www.yodev.dev/t/arte-ascii-animado-para-tu-web-191-piezas-gratis-para-html-react-y-astro/5586/1))_

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](https://www.yodev.dev/t/crear-animaciones-web-increibles-en-three-js-con-gsap/545)