A README's badge row where build turns passing, coverage climbs, downloads tick up and the star count rolls over.
# ascii-magic-art Animated ASCII art for web pages, READMEs and terminals. ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄ build running coverage 81% npm v1.1.0 license MIT ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄ downloads 18.2k/month stars 99 pieces 734 ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀ ────────────────────────────────────────────────────────────────────────────────────────
Paste two lines into any page, use it from React, play it in a terminal, put a GIF in a README, or hand the Agent prompt to your coding agent. Every tab follows the look you pick above.
<script type="module" src="https://www.ascii-magic.com/ascii/ascii.js"></script>
<ascii-art piece="readme-badges"></ascii-art>// npm install ascii-magic-art
import { useEffect, useRef } from "react";
import { play } from "ascii-magic-art/runtime/player.js";
import * as piece from "ascii-magic-art/pieces/readme-badges.js";
export function ReadmeBadges() {
const ref = useRef(null);
// play() draws the piece on a canvas in your look and returns stop(), which React runs on unmount
useEffect(() => play(ref.current, piece), []);
return <pre ref={ref} style={{ fontSize: 10, fontFamily: "Menlo, Consolas, monospace" }} />;
}npx ascii-magic-art readme-badges<!-- Export the GIF below in the look you picked, commit it, then: -->
<p align="center">
<img src="assets/readme-badges.gif" alt="README Badge Row, animated ASCII art" width="720">
</p>Add the animated ASCII art piece "readme-badges" (README Badge Row) from ASCII Magic to this project.
1. Load the script once, in the browser only (in SSR frameworks such as Next.js, load it on the client):
<script type="module" src="https://www.ascii-magic.com/ascii/ascii.js"></script>
2. Put the piece where it fits best, such as the hero, a loading state, an empty state or the 404 page:
<ascii-art piece="readme-badges"></ascii-art>
3. Keep a real heading or text next to it (the art is decoration), and size it with the size attribute or CSS.
Preview and options: https://www.ascii-magic.com/ascii/readme-badges
Rules for coding agents: https://www.ascii-magic.com/ascii/use/ai-coding-agentsPause on the frame you like, pick a look, then download it at an exact size.
MIT licensed and open source on GitHub. It imports one small helper file, kit.js. This is the animation itself: what gets drawn in every frame. The look you pick is applied on top by the player, like a filter, so this file stays the same in every look while the snippets above change with it. Edit it to change the animation; see the docs to make your own.
/* readme-badges: the badge row at the top of a README, values updating live. */
import { Grid, palette } from "../lib/kit.js";
export const meta = {
slug: "readme-badges",
name: "README Badge Row",
category: "screens",
note: "A README's badge row where build turns passing, coverage climbs, downloads tick up and the star count rolls over.",
tags: ["readme", "badges", "github", "ci", "coverage", "open-source", "status", "header"],
cols: 92, rows: 14, fps: 24,
loop: 10,
palette: palette(["#e6edf3", "#8b949e", "#30363d", "#3fb950", "#d29922", "#1f6feb", "#8957e5", "#da3633", "#ffd75e", "#0d1117"]),
};
const LOOP = 10;
const fmtK = (n) => (n >= 1000 ? (n / 1000).toFixed(1) + "k" : String(n));
export default function create() {
const g = new Grid(meta.cols, meta.rows), W = meta.cols;
// a two-part badge: grey label, coloured value, drawn as a solid bar with the text knocked out
const badge = (x, y, label, value, vc) => {
const lw = label.length + 2, vw = value.length + 2;
for (let i = 0; i < lw; i++) g.set(x + i, y, "▄", "2"), g.set(x + i, y + 2, "▀", "2"), g.set(x + i, y + 1, " ");
for (let i = 0; i < vw; i++) g.set(x + lw + i, y, "▄", vc), g.set(x + lw + i, y + 2, "▀", vc);
g.text(x + 1, y + 1, label, "0");
g.text(x + lw + 1, y + 1, value, "0"); // white on the colour bars, so every value reads
return lw + vw;
};
return (t) => {
g.clear();
const ph = ((t % LOOP) + LOOP) % LOOP;
g.text(2, 1, "# ascii-magic-art", "0");
g.text(2, 2, "Animated ASCII art for web pages, READMEs and terminals.", "1");
// values over the loop
const passing = ph > 2.2;
const cov = Math.min(98, 81 + Math.floor(Math.max(0, ph - 1) * 4));
const dl = 18200 + Math.floor(ph * 37);
const stars = ph < 6 ? 99 : 100;
let x = 2;
x += badge(x, 4, "build", passing ? "passing" : "running", passing ? "3" : "4") + 2;
x += badge(x, 4, "coverage", cov + "%", cov > 95 ? "3" : cov > 85 ? "4" : "7") + 2;
x += badge(x, 4, "npm", "v1.1.0", "5") + 2;
badge(x, 4, "license", "MIT", "5");
x = 2;
x += badge(x, 8, "downloads", fmtK(dl) + "/month", "6") + 2;
x += badge(x, 8, "stars", String(stars), ph > 6 && ph < 7.2 ? "8" : "4") + 2;
badge(x, 8, "pieces", "734", "3");
g.hline(2, W - 3, 12, "─", "2");
return g.frame();
};
}
/YOUR OWN
The pieces here are hand-built animations. To turn your own photo, logo or video into animated ASCII, use the ASCII Magic editor.