Typing Animation

Typing was first added in version 2.24.0 but in current form, with all updates and fixes, you should use at least 2.28.0 to use all the features.

Higher-level API

Prompt animation

term.set_prompt("name: ", { typing: true, delay: 200 });

echo animation

term.echo("Hello", { typing: true, delay: 200 });

Low-level API

Low-level API is single method terminal::typing:

term.typing(<type>, <delay>, <string>, options);

• terminal::typing returns a promise that resolves when the animation ends.
• there is only one option, finalize
• type is one of the strings: 'prompt', 'echo' or 'enter'.
• prompt animation as the name suggests is an animation of the prompt and at the end, the prompt is set to the given string.
• echo animation as the name suggests animate the string that is echo into the terminal.
• enter animation is an animation of entering the command and pressing enter, it uses the current prompt as a prefix after the animation starts. Enter animation doesn't have a higher-level counterpart.

Disabling interactive mode

By default, if you run single animation it will display the key down event (that is base for all interactivity). But if you do a longer animation sequence (e.g. using delay in between animations) you should disable key events yourself. The easiest way is to use this pattern:

let animation;
const term = $('body').terminal(function(command) {
}, {
    keydown: () => animation ? false : undefined
});

When the animation starts set:

animation = true;

when the animation ends set:

animation = false

This will ensure that you will not end up with a broken state when animation and interactive mode (like echo or prompt that is used internally for animations) overlap on each other.

To see examples of typing animation see demos:

• Matrix: Trinity nmap sequence animation
• Matrix: follow white rabbit animation