Realistic Text Typing Effect – realistic-typewriter.js

Preview:

Description:

realistic-typewriter.js is a JavaScript library used to mimic the typewriter text typing/deleting effects just like the terminal. Written in CoffeeScript.

How to use it:

Load the compiled & minified version of the realistic-typewriter.js in your html page.

<script src="typewriter-bundle.min.js"></script>

The HTML structure.

<span id="typewriter" class="typewriter"></span>
<span class="caret">&nbsp;</span>

The basic usage:

var typewriter = require('typewriter');
var twSpan = document.getElementById('typewriter');
var tw = typewriter(twSpan).withAccuracy(95)
                           .withMinimumSpeed(5)
                           .withMaximumSpeed(17)
                           .build();
tw.put('$ ')
  .waitRange(500, 1000)
  .type('ls realistic-typewriter.js')
  .put('<br/>')
  .waitRange(1000, 1500)
  .put('ls: realistic-typewriter.js: No such file or directory<br/>')
  .put('$ ')
  .waitRange(1000, 1500)
  .type('exit')
  .put('<br/>')
  .wait(500)
  .put('logout<br/><br/>')
  .put('[Process completed]<br/>');

Changelog:

v0.2.3 (10/08/2018)

• Update