ASCII Arts and Terminal User Interfaces

I was always fascinated by ASCII art. It sounds simple but I think it's worth looking into. The two examples I remember back when I started my undergraduate course in 2014 were cowsay and sl - both simple and delightful ideas. I wonder what it must've been to work on side projects back in 1990s! A few years later, I found out about apps like cfdisk, lazygit and neovim. These introduced me to the idea of terminal user interfaces.

Fast forward to today, these user interfaces have become popular because of AI tools. The next time you try to install packages with npm, or pnpm, or pip, or wait for Claude to respond, see what happens in the terminal. You'll see fun animations while you wait. Want to see a mind-blowing example of ASCII art? Checkout Ghostty!

The other day, I decided to work on a toy problem in React. I wanted to write an ASCII loading spinner that cycles between -,\, |, /. I started with an array which had these characters and then used the modulo operator to go through each element. I created a state for the spinner, and updated it using setInterval.

const characters = ["-", "\\", "|", "/"];

const App = () => {
  const [loadingCharacterIndex, setLoadingCharacterIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setLoadingCharacterIndex((x) => (x + 1) % characters.length);
    }, 300);

    return () => clearInterval(interval);
  }, []);

  return <div>{characters[loadingCharacterIndex]}</div>;
};

Then, I asked myself, what would it take to build this for production? Users might want to customize the spinner animations or change the speed of the animation. I can allow the user to override the array of frames to change the animation. Then create a parameter for the frame rate instead of hard-coding the setInterval delay. It would look something like:

const Spinner = ({ characters = ["-", "\\", "|", "/"], speed = 300 }) => {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setIndex((i) => (i + 1) % characters.length);
    }, speed);

    return () => clearInterval(interval);
  }, [characters.length, speed]);

  return <div>{characters[index]}</div>;
};

And then I found out about cli-spinners, ora and yocto-spinner. Fascinating projects! There are JSON files in which frames are specified for different animation types. Users can select the animation of their choice.

Well-known projects like Claude-code and Gemini use Ink with which one can build terminal user interfaces by writing React code! There's even a tool to use Instagram in your terminal.

I hope this short post made you appreciate terminal user interfaces and ASCII arts!

References

• Another way to cycle through the frames is implemented here ink-spinner:

  const isLastFrame = previousFrame === spinner.frames.length - 1;
  return isLastFrame ? 0 : previousFrame + 1;