typpo.js

Typpo.js is a JavaScript library for procedurally animating lifelike human typing -- random errors, corrections and all.

Just set some parameters and supply a string, then watch Typpo type it with startling inaccuracy.

It's built around a task queue that makes it simple to animate asynchronously generated text, like live tweets or newsfeeds.

Using Typpo.js is easy:

<script src="typpo.js"></script>

<div id="myDiv"></div>

<script>
var options = {
    element: "myDiv", 
    badness: 20, 
    speed: 80, 
    backspaceSpeed: 10, 
    showCursor: true, 
    cursor: "|"
};

var myTyppo = new Typpo(options);

myTyppo.onDrain = function() {
    console.log("The Typpo task queue has been emptied!");
}

myTyppo.write("I'll correct my mistakes while typing this.");
myTyppo.pause(2000);
myTyppo.enter(2);
myTyppo.writeUncorrected("But I won't correct my mistakes while typing this.")
myTyppo.backspaceAll(3000);
</script>

The options object

element
String. The HTML element that Typpo will type into.

badness
Number. Typpo's overall typing inaccuracy, 0 - 100. 0 is a perfect typist, 100 is a terrible one.

speed
Number. Typpo's typing speed, 0 - 100. 0 is very slow, 100 is very fast.

backspaceSpeed
Number. The speed at which Typpo recognizes its errors and deletes them, 0 - 100. 0 is very slow, 100 is very fast.

showCursor
Boolean. Determines whether Typpo displays the cursor.

cursor
String. The character(s) that Typpo will display as its cursor.

Methods

write(string)
Types the specified string and corrects errors on the fly.

writeUncorrected(string)
Types the specified string and does not correct errors.

enter(number)
Simulates pressing the enter/return key, creating a line break. The number parameter is the number of times to press enter. enter(1) === enter().

pause(time)
Inserts a pause into the Typpo task queue, where time is the length of time to pause in milliseconds.

backspaceAll(ttl)
Backspaces all text in the Typpo HTML element. The ttl parameter is the length of time to wait, in milliseconds, before backspacing.

onDrain
This method is called every time the Typpo task queue is emptied. Useful for recursion, etc.

Contact

I'd love to see how you're using Typpo.js. Show me your projects!

twitter.com/noahlevenson

noahlevenson [at] gmail [dot] com