Create Realistic Typing Animations With Human Replay

Preview:

Description:

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

It captures the nuances of how a person actually types, including pauses, corrections, and speed variations, and then replicates that sequence in a specific element.

Features:

• Authentic timing capture: Records actual keystroke intervals and typing patterns from real user input.
• Natural replay behavior: Reproduces typing with realistic pauses, corrections, and character-by-character progression.
• Data compression: Automatically compresses recorded typing data into efficient operation sequences.
• Flexible output: Replays typing into any DOM element, not just input fields.

How to use it:

1. Install human-replay and import it into your project.

# NPM
$ npm install human-replay

import HumanReplay from 'human-replay';

2. Or directly load the human-replay library from a CDN.

<script src="https://cdn.jsdelivr.net/npm/human-replay"></script>

3. Create an <input> for recording, a <div> or <span> for the replay output, and some buttons to control the process.

<input type="text" id="recordInput" placeholder="Type something to record...">
<div id="replayOutput"></div>
<button id="startRecord">Start Recording</button>
<button id="stopRecord">Stop Recording</button>
<button id="replay">Replay</button>

4. Instantiate HumanReplay by passing it the input element you want to monitor.

const inputElement = document.getElementById('recordInput');
const outputElement = document.getElementById('replayOutput');
const humanReplay = new HumanReplay(inputElement);
document.getElementById('startRecord').addEventListener('click', () => {
  humanReplay.startRecording();
});
document.getElementById('stopRecord').addEventListener('click', () => {
  humanReplay.stopRecording();
});
document.getElementById('replay').addEventListener('click', () => {
  // Clear previous replay before starting a new one
  outputElement.textContent = ''; 
  humanReplay.replay(outputElement);
});

When a user clicks “Start Recording,” the library attaches an event listener to the input. Every time the user types, it logs the element’s current value and the time elapsed since the recording began. Clicking “Replay” then plays back this sequence in the replayOutput element.

5. For more advanced use, you might want to record a typing session and save the data to replay it later without needing the original recorder. This is useful for pre-baking an animation.

// After recording...
const compressedData = humanReplay.getCompressedData();
// Now you can save `compressedData` (e.g., as a JSON string)
// To replay it later, even on a different page:
const outputElement = document.getElementById('preview');
HumanReplay.replayFromData(outputElement, compressedData);

6. API Methods

• startRecording(): Begins capturing keystrokes and timing from the input element.
• stopRecording(): Stops the recording process and finalizes captured data.
• hasRecordedData(): Returns boolean indicating whether any typing data has been recorded.
• getRecordedData(): Returns raw timing and value data from the recording session.
• getCompressedData(): Returns optimized operation sequences for efficient storage and replay.
• replay(element, speed): Replays recorded typing into the specified DOM element with optional speed control.
• stopReplay(): Immediately stops any active replay animation.
• isReplaying(): Returns boolean indicating whether a replay is currently active.
• reset(): Clears all recorded data and stops any active operations.

Changelog:

v3.0.0 (08/29/2025)

• Complete rewrite to use TypeScript
• Now it’s a lib accessible on npm and CDN
• Users can now use the lib itself to record typing in their own app