Create Realistic Typing Animations With Human Replay

Preview:

Description:

Human Replay is an open-source, JavaScript-powered web app that allows you to record and playback text input on a webpage.

Type your desired text, and you’ll receive a piece of JavaScript code that replays your typing animation when added to your webpage.

How to use it:

1. Go to the Human Replay app and Type something in the text field.

2. Click the Generate code button.

3. The app will then generate a JavaScript snippet that you can insert into your webpage to replay your typing (including typing, deleting, delays, etc).

/*
* This code was generated by Human Replay (https://einenlum.github.io/human-replay/)
*/
const replayText = (element, values) => {
element.textContent = '';
const printingStart = new Date();
let localInterval = setInterval(() => {
    const timePassed = new Date() - printingStart;
    const value = values.shift();
    if (!value) {
        clearInterval(localInterval);
        return;
    }
    if (value.t > timePassed) {
        values.unshift(value);
        return;
    }
    if (value.op === 'a') {
        element.textContent = element.textContent + value.v;
        return;
    }
    if (value.op === 'd') {
        element.textContent = element.textContent.slice(0, -1);
        return;
    }
    element.textContent = value.v;
}, 20);
return localInterval;
}
const values = [{"op":"a","v":"C","t":0},{"op":"a","v":"S","t":224},{"op":"a","v":"S","t":424},{"op":"a","v":"S","t":600},{"op":"a","v":"c","t":996},{"op":"a","v":"r","t":1236},{"op":"a","v":"i","t":1349},{"op":"a","v":"p","t":1553},{"op":"a","v":"t","t":1684},{"op":"a","v":".","t":1852},{"op":"a","v":"C","t":2296},{"op":"a","v":"o","t":2788},{"op":"a","v":"m","t":3024},{"op":"d","t":3496},{"op":"a","v":"M","t":4628},{"op":"d","t":4968},{"op":"d","t":5120},{"op":"d","t":5516},{"op":"a","v":"c","t":5976},{"op":"a","v":"o","t":6136},{"op":"a","v":"m","t":6388}];
const myElement = document.getElementById('your-element-id');
replayText(myElement, values);