Typecadence is a JavaScript library that provides an animated typing effect that automatically simulates natural human typing, including speed variations and mistakes. It applies the animation to any HTML element with the class typecadence, which plays only when the element is visible to the user.
<span class="typecadence">This is Typecadence with its default settings.</span>
Include the following script tag in your HTML document:
<script src="https://cdn.jsdelivr.net/npm/typecadence@^1 "></script>
Install Typecadence using NPM in your project directory via the command line:
npm install typecadence
Then import Typecadence into your TypeScript/JavaScript project:
import Typecadence from 'typecadence';
Download the latest version of Typecadence from the GitHub repository and include the /dist/typecadence.js file in your project.
The minimum and maximum typing speed. The value is a single number of milliseconds or a range in milliseconds separated by a comma. Each new keystroke is typed at the specified speed or a random speed within the specified range.
data-typecadence-speed50,100
<span class="typecadence" data-typecadence-speed="200,1400">This is Typecadence with a custom speed.</span>
The delay before typing starts. The value is a number of milliseconds.
data-typecadence-delay0
<span class="typecadence" data-typecadence-delay="3000">This is Typecadence with a three-second start delay.</span>
A separate typing speed for space characters. When set, spaces are typed at this speed instead of the general typing speed. When not set, spaces use the general typing speed. The value format is the same as the general speed attribute.
data-typecadence-space-speed
<span class="typecadence" data-typecadence-space-speed="500,800">This is Typecadence with a slower space speed.</span>
A separate speed for backspace corrections. When set, mistakes are corrected at this speed instead of the general typing speed. When not set, backspacing uses the general typing speed. The value format is the same as the general speed attribute.
data-typecadence-backspace-speed
<span class="typecadence" data-typecadence-mistakes="25" data-typecadence-backspace-speed="20,40">This is Typecadence with fast backspace corrections.</span>
The chance of a mistake being made with each keystroke. The value is a percentage.
data-typecadence-mistakes5
<span class="typecadence" data-typecadence-mistakes="25">This is Typecadence with a 25% chance of a mistake being made with each keystroke.</span>
If there is a chance for mistakes, this is the maximum number of mistakes that can be present before backspacing to correct the earliest mistake.
data-typecadence-mistakes-present1
<span class="typecadence" data-typecadence-mistakes-present="3">This is Typecadence with a maximum of three mistakes present before backspacing to correct the earliest mistake.</span>
If there is a chance for mistakes, this is the keyboard layout used to determine which keys are adjacent to each other for mistakes.
data-typecadence-mistakes-keyboardqwerty, qwertz, or azertyqwerty
<span class="typecadence" data-typecadence-mistakes-keyboard="azerty">This is Typecadence with a AZERTY keyboard layout.</span>
By default, the caret is a <span> with a class of typecadence-caret. The tag, class, and ID of the caret can be customized.
Disable the caret.
data-typecadence-carettrue
<span class="typecadence" data-typecadence-caret="false">This is Typecadence with caret.</span>
The HTML tag used for the caret element.
data-typecadence-caret-tagspan
<span class="typecadence" data-typecadence-caret-tag="i">This is Typecadence with a caret rendered as an italic element.</span>
An additional CSS class to apply to the caret element. The typecadence-caret class is always applied.
data-typecadence-caret-class
<span class="typecadence" data-typecadence-caret-class="my-caret">This is Typecadence with a custom caret class.</span>
An ID to apply to the caret element.
data-typecadence-caret-id
<span class="typecadence" data-typecadence-caret-id="my-caret-id">This is Typecadence with a custom caret ID.</span>
The caret character.
data-typecadence-caret-char|
<span class="typecadence" data-typecadence-caret-char="_">This is Typecadence with a custom caret character.</span>
The caret color.
data-typecadence-caret-colorinherit
<span class="typecadence" data-typecadence-caret-color="#cc2127">This is Typecadence with a custom caret color.</span>
Disable the caret's blinking animation.
data-typecadence-caret-blinktrue
<span class="typecadence" data-typecadence-caret-blink="false">This is Typecadence without a blinking caret.</span>
The caret blink speed. The value is in milliseconds.
data-typecadence-caret-blink-speed500
<span class="typecadence" data-typecadence-caret-blink-speed="1000">This is Typecadence with a slower blinking caret.</span>
The caret can be set to permanently remain at the end of the text.
data-typecadence-caret-remainfalse
<span class="typecadence" data-typecadence-caret-remain="true">This is Typecadence with a caret that permanently remains at the end of the text.</span>
The caret can be set to remain at the end of the text for a specific amount of time. The value is in milliseconds.
data-typecadence-caret-remain-timeout0
<span class="typecadence" data-typecadence-caret-remain-timeout="5000">This is Typecadence with a caret that remains at the end of the text for five seconds.</span>
The name of a global function to call when the animation is complete. The function receives the animated element as its argument.
data-typecadence-callback
<span class="typecadence" data-typecadence-callback="onTypingComplete">This animation will call a function when complete.</span>
Every animated element dispatches a typecadence:complete event when the animation finishes. The event bubbles and includes the element in event.detail.element.
document.querySelector('.typecadence')
.addEventListener('typecadence:complete', (e) => {
console.log('Typing finished!', e.detail.element);
});