bas3line / ascii

Thanks to the sponsors who make running ascii.rest possible 
240 pieces for React, Next.js, Astro or plain HTML. 
The banner above is drawn by ascii.rest: make your own.
ascii.rest · docs · install · make your own · pieces · contributing
Written in TypeScript by @bas3line. 240 pieces, from full-colour scenes to loaders, charts, language logos, Linux distros, spinning shapes and physics. The donut above turns on a page with one tag: ` `. See them all at ascii.rest.
## Why
I've always been a fan of Markdown files and terminal-style websites: plain text, one monospace face, nothing that moves without a reason. The kind of quiet web that planetscale.com does well. So I made this, a way to put a little motion on pages like that without giving up the style. If you like minimalism, this library is for you.
## Install
 [code] 
Or skip installing: the HTML tag loads everything from ascii.rest. Or copy the source into your project, to keep and change, through shadcn or the CLI:
 [code] 
Every way, with every option, is in the docs.
## Make your own
`ascii.rest/kit` makes a piece of your own in one line, by name, with options in words and no maths:
 [code] 
There are looks (a sea, a plasma, aurora, flames, rain, a galaxy), motions that set anything spinning, bouncing or floating, and widgets (a clock, a progress bar, a gauge, a chart). When no recipe makes your thing, say what it is made of. A glass of water is a cup, made of glass, with water inside and bubbles rising, written to an SVG for your README:
 [code] 
Everything the kit makes is a normal piece, so it plays in React, on a page, as an SVG and in a terminal. The recipes are made of parts you can use yourself, all the way down to the maths: fields, drawing, maths, 3D scenes, particles, effects, layouts, images, materials and SVG drawings. Start with the kit in the docs, or the examples. `npx ascii.rest play sea.ts --watch` plays a file's piece in your terminal as you write it, and `npx ascii.rest svg sea.ts --out sea.svg` writes its SVG.
## React and Next.js
 [code] 
`Ascii` and `Banner` are client components (`"use client"`), so they go straight into the Next.js app router. Text pieces draw into a ` ` in its colour and font size; the coloured ones, scenes, logos, companies and distros, draw onto a ` ` as wide as its container, or into a ` ` in one ink with `mono`. React and Next.js in the docs.
## Astro
 [code] 
The first frame is rendered on the server, so the page is whole before any script runs; the piece starts playing once the page loads.
## HTML, no build step
 [code] 
Style it like text: `ascii-art { font-size: 10px; color: teal; }`. The logos, companies and distros come in their own colours; add `mono`, ` `, to draw one in the text's colour instead. In a bundled app, `import "ascii.rest/element"` defines the same tag.
## In a GitHub README
A README runs no script, so every logo, company and distro also comes as an animated SVG, one loop of its glint or scan, at `https://ascii.rest/svg/ .svg