← Back to gallery
CSS

Multiline Typewriter Line-Step Sizing

A multiline typewriter pattern that grows the reveal container by line-height steps so complete rows appear without partial-line clipping or layout shift.

Duration
4s
Resolution
1440×900
Format
CSS
multiline-typewriterline-heightline-stepheight-increasereduced-motion

Line-height Reveal / Multiline Typewriter

Multiline Typewriter Line-Step Sizing

A reveal container grows by line-height units so multiline copy appears one complete row at a time instead of exposing partial lines.

release note line-step reveal - 3.2s cycle · 1.00 intensity
Release motionprimitives withoutlayout drift.

Three rows · measured height

Release Note

Three rows reveal in line-height steps, keeping each row fully hidden until its step arrives.

The container height animates from one line to the authored row count using a unitless line-height basis.

  • line-height
  • height steps
  • multiline
Draft saved.Review before publishing.

Two rows · fast reveal

Chat Composer

A shorter two-line block shows how the same line-step logic works for compact status copy.

The caret sits at the block edge and follows the reveal height rather than individual glyphs.

  • status copy
  • two lines
  • caret
Small motionscan carry largeinterfacepromises.

Four rows · slower pacing

Editorial Quote

A slower four-line variant highlights why line-height consistency matters when row count grows.

The visual stage reserves final height before animation starts, avoiding cumulative layout shift.

  • four lines
  • fixed stage
  • readable leading

Line-step inspector

Release Note

Release motionprimitives withoutlayout drift.
Motion contract
The container height animates from one line to the authored row count using a unitless line-height basis.
Accessibility
The text exists in normal reading order. Reduced motion exposes every line immediately.

This pattern is better for short editorial blocks than for long paragraphs that can reflow at many breakpoints.

css
.line-step {
  --line-count: 3;
  line-height: 1.35;
  max-height: calc(1lh * var(--line-count));
  overflow: hidden;
  animation: lineStepReveal 3.20s steps(var(--line-count), end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .line-step { animation: none; max-height: none; }
}