Split Panel Terminal Cursor CTA Block for React

The prompt is a real button, so Enter and Space work when it's focused, and a click or tap works anywhere on it. Pressing it swaps the resting prompt for our Terminal Text, which prints the lines of OUTPUT a line at a time, STAGGER milliseconds apart, and ends on a new prompt. Nothing is executed: the output is typed text, and it plays once. Reload the page to see it again.

Edit COMMAND and OUTPUT at the top of the file. A line that starts with a tick is drawn in the success colour, an error or warning line in its own colour, and any other line is muted. The pane reserves the height of the whole session before you press anything, so running the command never moves the page.

Once the command has run, the next step is the button beside it, so focus goes there and a keyboard user can press Enter again to follow it. It only happens after the visitor's own action, never on load. A polite status also announces that the command ran and the server is ready.

The resting cursor stops pulsing and the output appears all at once when the command runs. The pitch no longer fades up on load. The prompt itself still waits for the visitor, because the press is their choice, not an animation.

The pane is a figure named "Terminal", and its earlier command is hidden as decoration. Before the run, the prompt reads as a button, "Run npx create-kiln, Press Enter to run". After it, the session is plain text, the command first and the output below, and the title bar's three dots are hidden. The $ prompt signs are decoration and are left out of what is read and what is selected.

The pane goes under the copy and takes the full width. Output lines wrap rather than scroll, and the terminal keeps the same fonts as on a wide screen, so the whole session reads at 320 pixels with no sideways scrolling. The terminal's text always runs left to right, on right-to-left pages too.