← Back to gallery
CSS

Typewriter Width Reveal

A project-authored CSS typewriter showcase where a wrapper track width sweeps from 0 to the phrase width while a separate caret layer owns its own blink cadence, letting typing and blink timing stay independent across monospace and proportional presets.

Duration
5s
Resolution
1440×900
Format
CSS
typewriterwidthstepscarettext-animation

Typewriter / width-reveal / caret

Typewriter width reveal with a separated caret

Reimplements the typewriter reveal by animating a wrapper track width and driving the blinking caret from its own keyframe so typing cadence and blink cadence can be tuned independently.

terminal prompt reveal — 2.40s type · 0.95s blink

Monospace track + steady caret

Terminal Prompt

Fixed-pitch characters tie the width sweep to a whole-character grid so the caret always lands between glyphs, never halfway through one.

type 2.4s · steps(30, end) · blink 0.95s · step-end

  • steps()
  • monospace
  • separate caret layer

Proportional type + eased flow

Editorial Headline

Proportional letters ride a max-content wrapper so the reveal stops exactly at the phrase end, then the caret eases its blink to feel less mechanical.

type 3.8s · cubic-bezier(0.22, 1, 0.36, 1) · blink 1.4s · ease-in-out

  • max-content
  • proportional text
  • eased reveal

Slow sweep + gentle blink

Ambient Ticker

A slower reveal and a soft blink keep a marketing strapline from pulling focus — the caret settles into a background rhythm instead of an active cursor.

type 5.6s · steps(32, end) · blink 1.8s · ease-in-out

  • slow sweep
  • ambient
  • low-flicker caret

Caret inspector

Terminal Prompt

Typing
2.40s · steps(30, end)
Blink
0.95s · steps(1, end)

A ch-based track lines up with 30 monospace characters. The caret is a separate block element so its blink cadence stays independent of the typing reveal.

Live controls

css
.typewriter {
  --type-duration: 2.40s;
  --type-blink-duration: 0.95s;
}

.typewriter-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typewriter-reveal var(--type-duration) steps(30, end) forwards;
}

.typewriter-caret {
  animation: typewriter-blink var(--type-blink-duration) steps(1, end) infinite;
}

@keyframes typewriter-reveal {
  to { width: 30ch; }
}

@keyframes typewriter-blink {
  50% { opacity: 0; }
}