Terminal Command Showcase Features Block for React

Edit SETS at the top of the file. Each tab has an id, a label and a session: a block of text where a line starting with $ is a command, typed after the prompt, and any other line is output, printed whole. Keep lines to about 40 characters so they fit a phone, and each session to about a dozen lines so it fits the terminal's fixed height. TRAITS holds the three cells under it.

It's CSS only: every character, line and caret is in the page from the start and shown by an animation at its moment, so nothing resizes while it plays. A session types once each time its tab opens (the tab's panel is created when you open it) and ends on a blinking prompt. With reduced motion, or without scripting, the whole session is simply there. A screen reader reads the session once, as plain text.

A terminal is dark by nature, and a dark window reads at once as one. Only that window takes the dark scope; the header, tabs, chips and cells follow your theme, in light and in dark. If you want a themed terminal, remove the dark class on the window.

They are real tabs, a list named Command set with a panel for each. Tab moves into the list, the arrow keys move between Deploy, Build, Test and Log and open each one as they go, and Tab again moves into the open panel. Every panel has the same fixed height, so a longer session can't push the cells below it.

The terminal text is a size smaller and wraps instead of scrolling, in a window of one fixed height, with the tabs above it. The three cells become full-width bands under it, each with a rule on top. Nothing scrolls sideways at 320 pixels.

The page follows the reading direction, and the terminal stays left to right on purpose: commands, paths and output are code and don't mirror.