React-ansi-animation provides a set of components for displaying ANSI art. It can render either HTML text elements or into a canvas. It can also output text for Ink-based CLI applications.

The library was built with the help of React-seq. It is designed for React 18 and above.

npm install --save-dev react-ansi-animation

import { AnsiText } from 'react-ansi-animation';

export default function Widget() {
  return <AnsiText src="./test.ans" modemSpeed={9600} />;
}

• Embedded font support
• Modem speed emulation
• Blinking text
• Animation playback control

You can see the both <AnsiText> and <AnsiCanvas> in action at https://chung-leong.github.io/react-ansi-animation/:

The website is optimized for viewing on mobile devices as well.

To see the Ink version of <AnsiText> in action, install ink-ansi-animation then run it from a directory containing ANSI files:

You can download the ANSI files used by the demo website here. Check out the ANSI art archive Sixteen Colors if you wish to see more glorious creations from years bygone.

• <AnsiText>
• <AnsiCanvas>

• useAnsi

<AnsiText> creates a <code> HTML element, which employs the "monotype" font by default. It will have the className "AnsiText". To change the font size, weight, and other attributes, simply add a rule to your CSS file:

.AnsiText {
  font-family: 'Courier New', monotype;
  font-size: 24px;
  font-weight: bold;
}

You can change the font used by <AnsiCanvas> in the same manner:

.AnsiCanvas {
  font-family: 'Courier New', monotype;
  font-size: 24px;
  font-weight: bold;
}

Use a @font-face declaration if you wish to use a custom font:

@font-face {
  font-family: 'Flexi IBM VGA';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/flexi-ibm-vga-true-437.woff2') format('woff2'),
       url('/fonts/flexi-ibm-vga-true-437.woff') format('woff');
}

You can change the color palette by providing the palette prop. To define colors through CSS instead, set palette to "css".

By default this library emulates a 56K modem. Set the modemSpeed prop to use a different speed. Use Infinity if you want the final picture to appear immediately.

The CGA 80x25 text mode uses 4 bits to store the text color (16 possible values), 3 bites to store the background color (8 possible values), and 1 bit for blinking. ANSI arts created in the BBS era sometimes depends on blinking for certain effects. ANSI arts created in later times tend to use the final bit for high-intensity background colors. They would look odd when viewed in CGA text mode.

Blinking is disabled by default. Set the blinking prop to enable it.

By providing an onStatus handler and altering the initialStatus prop, you can pause the animation or jump to different points in time. Code for the demo serves as a good working example.

Special thanks to the maintainers of ansi-bbs.org for providing a detailed ANSI specification, and the maintainers of Sixteen Colors, the source of most of the ANSI arts used in the demo.