▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
          ░▒▓█ rapid1337.com █▓▒░           
╓──────────────────────────────────────────╖
║ANSI Art and the Lost Craft of the Cracktr║
╟──────────────────────────────────────────╢
║ CP437, 16 colours, and a live ANSI       ║
║ renderer running in your browser.        ║
╟──────────────────────────────────────────╢
║   ·· blog/ansi-art-lost-craft.html ··    ║
╙──────────────────────────────────────────╜

============================================================================
Title ..: ANSI Art and the Lost Craft of the Cracktro
Author .: NoNameNo
Date ...: 2026-06-24
Section : Blog
============================================================================


# ANSI Art and the Cracktro

Before the web there was the BBS, and before CSS there was ANSI: 16 colours,
the CP437 character set, and escape sequences that turned a text terminal
into
a canvas. Groups signed their cracks with elaborate ANSI logos. This is that
craft.

## Live render

The block below is a real `.ans` file (`assets/ansi/welcome.ans`) parsed and
drawn to a `<canvas>` in your current bitmap font, with a progressive
"reveal"
playback like a BBS painting the screen:

<canvas class="ansi" data-ansi="../assets/ansi/welcome.ans" data-cols="44" data-animate="reveal" data-speed="700"></canvas>

<script src="../assets/js/ansi.js"></script>

Switch the font up top to **IBM VGA 9x16** for pixel-perfect CP437 — the box
drawing characters (`░▒▓│┤╣║╗╝`) line up cell-for-cell because the renderer
uses one fixed cell width.

## The format

ANSI is just text with in-band escape sequences. The important one is SGR
(Select Graphic Rendition):

    ESC [ <n> m

where `n` selects attributes: `30-37` foreground, `40-47` background, `1`
for
bold/bright, `0` to reset. Cursor moves (`ESC[<row>;<col>H`) let artists
paint
non-linearly — which is how "ansimations" achieve motion.

## Why it still matters

ANSI is the demoscene's haiku: a hard constraint that forces craft. Working
in
80x25 with 16 colours teaches composition the way `malloc` teaches respect.
Fork this framework, drop your own `.ans` in `assets/ansi/`, and sign your
philes properly.


----------------------------------------------------------------------------
-- rapid1337.com -- The dumping ground for all things tech // knowledge is the weapon --