FanOutDiagram
An animated picture of one thing serving many.
View code
<FanOutDiagram
aria-label="One feed fetch reaches every reader"
pauseLabel="Pause the animation"
source={{
icon: <RssIcon size={14} aria-hidden="true" />,
title: "Feed fetched once",
detail: "GET /blog/feed.xml",
}}
targets={[
{ title: "Ana's queue", detail: "+3 posts" },
{ title: "Ben's queue", detail: "+3 posts" },
{ title: "Chen's queue", detail: "+3 posts" },
{ title: "Dana's queue", detail: "+3 posts" },
{ title: "Eli's queue", detail: "+3 posts" },
]}
outcome="Delivered to 5 readers"
footnote={
<>
<InboxIcon size={14} aria-hidden="true" />
One request, however many follow
</>
}
/>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 { 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.
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 diagram's figure. Required — the library ships no copy. |
pauseLabel | string | No | Accessible name of the pause toggle. |
source | Source | Yes | |
targets | readonly Target[] | Yes | Two to six targets, laid out in up to three columns. |
direction | "out" | "in" | No | 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 | No | The result badge that appears once every target lit, such as "Delivered to 4". |
footnote | RemixNode | No | 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. |