Terminal

The component is self-contained: one file, zero dependencies, palette in local --vibeui-code-block-anim-003-* variables. It takes the theme from the environment via light-dark() plus a rule for the .dark class, so it does not stay light in a dark project. The command types character by character: the command line's width expands from 0 to var(--ch) through a steps() timing-function, with a blinking cursor beside it. Once typed, output lines fade and rise in one by one — each line's start offset via nth-child, so the output appears with a growing delay. Then a pause, an instant reset of both typing and output, and the cycle repeats — the whole timeline runs on plain CSS with no client JS. An output line starting with ✓ is tinted with the accent success color. Everything stops under prefers-reduced-motion.