Classic Terminal Typing Effect In JavaScript – Console Typer

Console Typer is a JavaScript library to create a configurable typing animation for paragraphs, simulating the experience of typing in a command line interface.

How to use it:

1. Download and import the Console Typer.

import ConsoleTyper from './dist/console-typer.js';

2. Initialize the Console Typer on your text content.

<p class="example">
  ...
</p>

const consoleTyper = new ConsoleTyper({
      paragraphElement: document.getElementsByClassName('example')[0]
});

3. Start the typing effect.

consoleTyper.startTyping();

4. Available configurations.

• loop: loop the effect after finish.
• loopAfterSeconds: seconds it waits before starting/restarting the effect.(default: 6)
• cursor: character to use as the cursor (default: “I”)
• stopCursorAfterBlinks: Number of blinks that the cursor will do before stopping. default (10)
• cursorAnimationSpeedMs: Speed of cursor blinking, milliseconds: (default: 500)
• typingSpeedMs: Typing effect speed (default: 70)
• onStartTyping(): fired after starting typing
• onStopTyping: Fired after stopping typing
• onStopCursorAnimation: Fired after cursor animation stops

const consoleTyper = new ConsoleTyper({
      loop: true,
      loopAfterSeconds: 6,
      cursor: "I",
      stopCursorAfterBlinks: 10,
      cursorAnimationSpeedMs: 500,
      typingSpeedMs: 70,
      onStartTyping: () => {},
      onStopTyping: () => {},
      onStopCursorAnimation: () => {}
});