bas3line/ascii

选用指南

AI 根据 README 整理 · 2026/10/16 21:51:47

使用方式

可通过npm安装后以React组件、Astro组件、HTML标签或CLI方式使用，也可直接引用CDN脚本。

查看 README 依据

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](https://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 ```sh npm install ascii.rest ``` Or skip installing: the [HTML tag](#html-no-build-step) loads everything from ascii.rest. Or copy the source into your project, to keep and change, through shadcn or the CLI: ```sh

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 ```html <script type="module" src="https://ascii.rest/ascii.js"></script> <ascii-art piece="donut"></ascii-art> ``` Style it like text: `ascii-art { font-size: 10px; color: teal; }`. The logos, companies and distros come in their own colours; add `mono`, `<ascii-art piece="rust" 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

## In a terminal ```sh npx ascii.rest rust # plays until you press a key npx ascii.rest night-coast --seconds 10 npx ascii.rest list # every piece's name, by category npx ascii.rest banner 'my cli' # your text in block letters ```

部署要求

浏览器需支持ES模块、自定义元素和IntersectionObserver，彩色图案还需ResizeObserver。

查看 README 依据

| `src` | or the URL of any module that follows the piece contract | | `fps` | overrides the frame rate | | `options` | JSON overriding the option defaults: `'{"text":"hello"}'` | | `label` | what it shows, for screen readers | | `mono` | draws a coloured piece in one ink, the text's colour | ## Browser support Any current browser: it needs ES modules, custom elements and `IntersectionObserver`, plus `ResizeObserver` for the coloured pieces. Importing any module on a server, for server rendering, is safe: nothing touches the DOM until a piece is mounted.

已知限制

部分系统字体缺少方框绘制字符时，需从ascii.rest加载专用字体；终端过小会裁剪图案并提示。

查看 README 依据

Many pieces draw with box drawing and block glyphs (`─ │ ╭ █ ▄ ░`). Where the system monospace face has none, as on Android, the tag and the Astro component take them from "ascii.rest mono", a 3 KB cut of [JetBrains Mono](https://github.com/JetBrains/JetBrainsMono) (OFL) served by ascii.rest, so every row keeps its width. Only a browser that lacks the glyphs fetches it. With React, put it in your own `<pre>`'s font stack: ```css @font-face { font-family: "ascii.rest mono"; src: url("https://ascii.rest/fonts/ascii-rest-mono.woff2") format("woff2");

The logos, companies, distros and scenes play in their own colours, in 24-bit colour. A scene is shrunk to fit the terminal, whatever its size, and drawn in tones, two of its rows in each of the terminal's as half blocks, so the dots it is made of blend as they do on a page. `--mono` draws a coloured piece in the terminal's own colour, for a terminal without 24-bit colour, and `--light` takes the colours meant for a light background. `--fps` and `--seconds` set the speed and the length. The piece plays centred; any other piece wider or taller than the terminal shows only its middle, and it