JavaScript animation example
JavaScript Typing Effect: Terminal Typewriter
A typewriter in a terminal window is the go-to hero for developer tools. What makes it believable is the rhythm: real typing speeds up inside words and pauses at spaces and punctuation. This one types each command with that variable timing, prints its output instantly, and moves on to the next.
- 4.4 KB file
- 5 live inputs
- JavaScript runtime
How this terminal typing effect works
- Every character gets a delay from a base speed plus extra time after spaces and punctuation, plus jitter.
- Commands and outputs come from inputs, separated by "|" and "=>".
- Click the terminal to skip to the end of the current command.
Add it to your JavaScript app
Install exodeui-vanilla, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui-vanilla';
// <canvas id="javascript-typing-effect" style="width: 100%; height: 480px"></canvas>
const player = new ExodeUICanvas({
element: '#javascript-typing-effect',
fit: 'Layout',
onReady: (engine) => { },
});
player.load(await (await fetch('/javascript-typing-effect.exode')).json());
player.play();Inputs
| Input | Type | Default | Range |
|---|---|---|---|
script | Text | npm i exodeui => added 1 package in 2s|npx exode build => compiled 3 files|npm run dev => ready on localhost:3000 | — |
speed | Number | 1 | 0.3 – 3 |
accent | Text | #4ade80 | hex colour |
ink | Text | #e5e7eb | hex colour |
bg | Text | #0d1117 | hex colour |
More JavaScript animations
Segmented Ring SpinnerTwelve segments in a ring with a rotating bright head and fading tail: the classic activity spinner.Scroll Reveal TimelineA timeline whose line draws with scroll progress while milestone cards slide in from alternating sides.Particle TextHundreds of particles that assemble into a word, scatter from the cursor and spring back.Curtain Wipe TransitionStaggered curtain panels sweep across, the page swaps underneath and the curtains pull away.Magnetic Confetti ButtonA button that leans toward the cursor like a magnet and bursts into spinning confetti on click.Blob Cursor LinksA blob cursor that stretches with speed and swells over links whose underlines draw in and out.
The same idea in other frameworks: Flutter wavy typewriter