# SequenceDiagram

> An animated sequence diagram: two to four parties side by side, each with a lifeline, and the messages between them drawn in order as arrows, then the exchange's outcome.

```ts
import { SequenceDiagram } from "@sdxc/ui/landing";
```

Renders the exchange on a raised surface inside a MotionLoop: an actor row, a
lifeline per actor, and one list item per message whose arrow runs between the two
lifelines' centres. Without motion every arrow shows drawn, so the static picture is the
finished exchange. Two diagrams with the same message count share keyframes.

## Examples

```tsx
<SequenceDiagram
	aria-label="A PKCE sign-in"
	actors={[{ name: "Browser" }, { name: "Your app" }]}
	messages={[{ from: 0, to: 1, label: "Open /login" }]}
	outcome="Signed in"
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `"aria-label"` | `string` | Accessible name of the message list. Required — the library ships no copy. |
| `pauseLabel?` | `string` | Accessible name of the pause toggle. |
| `actors` | `readonly Actor[]` | The parties, left to right; two to four fit a phone column. |
| `messages` | `readonly Message[]` | The messages, in the order they are sent. |
| `outcome?` | `RemixNode` | The result badge that appears once the last message lands, such as "Signed in". |
| `footnote?` | `RemixNode` | A note across from the outcome, such as what the exchange protects against. |

Also accepts everything in `Omit<TagProps<"div">, "children">`.