Monospace Terminal Stack

Overview

Type the command with steps(); spawn output lines that push prior lines up, anchored to a baseline.

Build

1. 01

   Command types with CSS steps() on ch-width text.

2. 02

   Each output line is born at the baseline.

3. 03

   Prior lines translate up by line-height.

4. 04

   Caret blinks, then vanishes on the last line.

.line-n { animation: stack-n 400ms both; }
@keyframes stack-2 { to { transform: translateY(calc(-1 * var(--lh))) } }