# FanOutDiagram

> An animated picture of one thing serving many: a source sends one pulse down a trunk, a bus carries it to every target, and each target lights in turn, then loops.

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

Renders the source, its trunk and a list of targets on a raised surface inside a
MotionLoop. Without motion every line shows filled and every target lit, so the
static picture is the delivered state. Diagrams of the same shape and direction share keyframes.

## Examples

```tsx
<FanOutDiagram
	aria-label="One fetch, every reader"
	source={{ icon: <RssIcon size={14} />, title: "Feed fetched", detail: "GET /feed.xml" }}
	targets={[{ title: "Ana", detail: "+3 posts" }, { title: "Ben", detail: "+3 posts" }]}
	outcome="Delivered to 2 readers"
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `"aria-label"` | `string` | Accessible name of the diagram's figure. Required — the library ships no copy. |
| `pauseLabel?` | `string` | Accessible name of the pause toggle. |
| `source` | `Source` |  |
| `targets` | `readonly Target[]` | Two to six targets, laid out in up to three columns. |
| `direction?` | `"out" \| "in"` | `out` puts the source on top and flows down to the targets; `in` puts the targets on top and flows down into the source. |
| `outcome?` | `RemixNode` | The result badge that appears once every target lit, such as "Delivered to 4". |
| `footnote?` | `RemixNode` | A note across from the outcome. |

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


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Direction` | `"out" \| "in"` | Which way the pulse flows: from the source to every target, or from every target in. |