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>
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>
If displayed, the caret is a <span> with a class of typecadence-caret.
Disable the caret.
data-typecadence-carettrue
<span class="typecadence" data-typecadence-caret="false">This is Typecadence with caret.</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>