Retro Terminal
A terminal window whose green lines reveal themselves one after another, once, before a solid cursor starts blinking. All in CSS.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Distortion has 31 effects, including 5 free. Explore the category →
3 usage examples
How it works
.rtm-window draws the window: a top bar with three dots (red, yellow, green), a black body in Courier New, thin scanlines laid by .rtm-body::before. Each .rtm-line is #3f3 green, 12 px, with a 5 px halo.
A line that also carries the rtm-typing class starts at zero width (width: 0; overflow: hidden; white-space: nowrap). The rtmTyping animation widens it to 100 % in 30 steps (steps(30)) over --rtm-line-time (2 s by default): the text appears in jolts, as if typed. Each line waits for its turn: animation-delay is --rtm-i × --rtm-line-time, with --rtm-i set from 0 to 5 on the first six lines. The animation plays once and keeps its final state.
The .rtm-cursor block on the last line then blinks forever (0.8 s, stepped). Typing starts when the window is rendered: on page load, or when you show it (an element going from display: none to visible replays its CSS animations). No JavaScript.
Accessibility
- Text present from the start: the lines exist in the HTML; only their visible width is animated. A screen reader reads all the text at once, without waiting for the typing.
- Decorative parts hidden: the dotted bar and the cursor have
aria-hidden="true". - Reduced motion: under
prefers-reduced-motion: reduce, every line shows at once and the cursor stays lit, without blinking. - No interaction: the terminal is not an input field and adds no focusable element. The cursor does not invite typing: avoid it where visitors might think they can write.
Browser compatibility
CSS only, no dependency. Each line's delay is computed with calc() and CSS variables (Chrome 49, Firefox 31, Safari 9.1 according to MDN data); the most recent property is inset (Chrome 87, Firefox 66, Safari 14.1). Measured in Chromium 151, Firefox 153 and WebKit 26.5: at 2.5 s, first line complete, second in progress, the rest empty, in all three engines; two independent copies; all text visible with reduced motion.
Without CSS animations, the lines would stay at zero width: that is why the reduced-motion rule resets them to width: auto. Where the text must be read without delay, simply remove the rtm-typing class from those lines.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0276-root">
<div class="rtm-window">
<div class="rtm-header" aria-hidden="true">
<span class="rtm-dot rtm-red"></span>
<span class="rtm-dot rtm-yellow"></span>
<span class="rtm-dot rtm-green"></span>
</div>
<div class="rtm-body">
<div class="rtm-line rtm-typing">user@retro:~$ npm install nostalgia</div>
<div class="rtm-line rtm-typing">Installing packages...</div>
<div class="rtm-line rtm-typing">Done in 3.14s</div>
<div class="rtm-line rtm-typing">user@retro:~$ <span class="rtm-cursor" aria-hidden="true"></span></div>
</div>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Lines (HTML — <div class="rtm-line rtm-typing">) |
4 lines | Up to 6 lines follow one another on their own. Beyond that, give the line its rank: style="--rtm-i: 6". Without rtm-typing, a line shows immediately. |
Time per line (CSS — --rtm-line-time) |
2 s | 0.4 to 0.6 s for a brisk log; the value is also the gap between two lines. |
Width (CSS — --rtm-w) |
280 px | 100% fills the parent. Typing widens each line up to the terminal width: a wide window reveals short lines faster. |
Colours (CSS — --rtm-color, --rtm-glow) |
#3f3, halo rgba(51, 255, 51, .5) |
The cursor follows --rtm-color. Amber #ffb000 or off-white change the era it evokes. |
Text size (CSS — --rtm-size) |
12 px | 9 to 10 px in a small component, 14 px and up full screen. |
| Replay the typing (HTML/JS — showing the root) | Once, on first render | Switch the root from display: none to visible, or replace it with a copy (root.replaceWith(root.cloneNode(true))): the animations start over. |
Demo frame (CSS — --rtm-page, --rtm-root-h) |
#0a0a0f, at least 300 px tall |
transparent and 0 drop the window into your layout. |
FAQ
<div class="rtm-line rtm-typing"> inside .rtm-body with style="--rtm-i: 0"; it types as soon as it is inserted. Add aria-live="polite" on .rtm-body so new lines are announced.
