Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

React-ansi-animation ci nycrc config on GitHub

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

Basic usage

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

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


Live demo

You can see the both <AnsiText> and <AnsiCanvas> in action at


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.



Customizing text appearance

<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".

Modem speed emulation

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.

Blinking text

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.

Animation playback control

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 for providing a detailed ANSI specification, and the maintainers of Sixteen Colors, the source of most of the ANSI arts used in the demo.


React component for displaying ANSI animation