TypedTerminal
An animated terminal that proves "you write this, it does that".
View code
<TypedTerminal
aria-label="A sign-in spec and its run"
pauseLabel="Pause the animation"
title="specs/sign-in.spec"
lines={[
{ kind: "input", text: 'visit "/login"' },
{ kind: "input", text: 'fill "Email" with "ada@example.com"' },
{ kind: "input", text: 'click "Sign in"' },
{ kind: "input", text: 'see "Welcome back, Ada"' },
{ kind: "output", text: "✓ 4 steps · 2.1s", status: "ok" },
]}
/>Demo landings
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
- The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
- KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { TypedTerminal } from "@sdxc/ui/landing";Renders the session as one <pre> in the terminal panel, with its pause toggle in the
panel's title bar, centred against the title.
Every line's full text is in the markup from the start, clipped only visually while it
types, so screen readers and copy read the whole session and reduced motion shows it done.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
"aria-label" | string | Yes | Accessible name of the session's figure. Required — the library ships no copy. |
pauseLabel | string | No | Accessible name of the pause toggle. |
title | RemixNode | No | Window title, such as a file name or a shell. |
prompt | string | No | Glyph before every input line, such as $; omit it for editor-style lines. |
lines | readonly Line[] | Yes | The session, in the order it plays. |
Also accepts everything in Omit<TagProps<"div">, "children" | "title">.
Types
| Name | Values | What it decides |
|---|---|---|
Status | "ok" | "fail" | "muted" | Ink an output line prints in: a pass, a failure, or a quiet aside. |