Live Typing
Each keystroke makes its letter spring up with a rotation in a unique colour — the last 15 typed characters are shown left to right and older ones are pushed off the edge, blinking cursor included. Under reduced motion, the word "effect" is shown statically at load time.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Hover has 48 effects, including 5 free. Explore the category →
3 usage examples
How it works
The .fx-0377-root frame listens to keydown events on the entire document: any single-character key (e.key.length === 1) adds an entry to a 15-slot array; Backspace removes the last one. On every keystroke the renderer clears the .lt377-display area and recreates one <span> per character with a colour computed from its position (hsl(220 + i × 10, 70%, 60%)), from blue at the first letter to violet at the fifteenth, and a staggered animation delay of 50 ms between letters.
The lt377-pop animation scales each letter to 1.3 then back to 1 in 0.4 s. The cursor (div.lt377-cursor) blinks in a loop (lt377-blink, 0.7 s). No initial state is needed: the area is empty until the first keystroke, with the cursor only. The effect uses no requestAnimationFrame loop, so there is nothing to stop when off screen.
Accessibility
- Screen reader: the display area has
role="status"andaria-live="polite"; each keystroke announces the added character without interrupting what the reader was saying. Thearia-labeldescribes the area on first focus. - Reduced motion: under
prefers-reduced-motion: reduce, no animation starts, the per-letter delay is removed and the word "effect" is shown immediately at load with a static cursor — the state of the effect is readable without a single letter having to move. - Keyboard only: the effect responds to a physical keyboard. On mobile, no touch equivalent is provided: there is no text field triggered on tap. If your users are on mobile, add a hidden
<input type="text">that receives focus on tap and fires theinputevent. - Focus and isolation: each copy only listens to the keyboard when it has focus. Click the area (or Tab to it) to activate it — an indigo outline appears. On the same page, two copies work independently: only the active area receives keystrokes.
Browser compatibility
Pure DOM and CSS, no dependency. Works in all modern browsers as soon as keydown, CSS animations and querySelectorAll are available, meaning since Chrome 4, Firefox 3.5 and Safari 4. window.matchMedia exists since Chrome 9, Firefox 6 and Safari 5.1. No experimental or prefixed API.
Without JavaScript, the display area stays empty. Without CSS animations, letters appear without the bounce effect.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0377-root">
<div class="lt377-display" role="status" aria-live="polite" aria-label="Display of typed keys"></div>
<span class="lt377-label" aria-hidden="true">Type on your keyboard</span>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| Maximum character count (JS — 15-slot array) | 15 | Replace if(chars.length > 15) chars.shift() with the value you want. 8 gives a compact result; 20 overflows on small screens without adjusting the font. |
Letter size (CSS — .lt377-display span { font-size }) |
2 rem | Increase for a monumental hero display; go down to 1.2 rem for inline use in a paragraph. |
Colour palette (JS — hsl(220 + i × 10, 70%, 60%)) |
blue to violet, base hue 220, step 10° | 220 → 0 gives red to blue; base 0, step 15 gives red to orange. For a fixed colour, replace with a constant hex code. |
Pop animation duration (CSS — @keyframes lt377-pop) |
0.4 s | 0.15 s gives a very snappy spring; 0.8 s a lazy bounce. |
Background (CSS — background of .fx-0377-root) |
#0a0a0f |
Set to transparent to integrate the effect into your page's own backdrop. |
FAQ
keydown events until a field has focus. To trigger the effect on touch, add a hidden <input type="text" style="opacity:0;position:absolute"> inside the root, focus it on tap, and listen to the input event instead of keydown.keydown listener is attached to each instance's .fx-0377-root. Each copy only reacts to keystrokes received while it has focus (click or Tab). On the same page, two areas work independently — only the active one updates.keydown does not fire for a paste (Ctrl+V fires keydown for "v" but not for each pasted letter). For dictation or paste, listen to the input event on a hidden field and read event.data to get the new characters.
