AggregateIllustration
Several upstream servers cabled into one Switchboard plate, one cable out to the agent; signals run in, the lamp flashes, one runs out.
Examples
Animated
4 s loop: a signal from each server, the lamp flares, one signal to the agent, the reply draws.
Light
Dark
<AggregateIllustration servers={['github', 'linear', 'notion', 'docs']} />Static frame
What prefers-reduced-motion visitors see, forced here with `still`.
Light
Dark
<AggregateIllustration servers={['github', 'linear', 'notion', 'docs']} still />Usage
import { AggregateIllustration } from '@switchboard/ui'
<AggregateIllustration servers?={[…]} />Props
Every component also takes mix, for css() and mixins applied after its own style.
AggregateIllustration
| Prop | Type | Default | Description |
|---|---|---|---|
| servers | string[] | ['github', 'linear', 'notion', 'docs'] | Upstream names, top to bottom; 1 to 4. |
| label | string | a sentence describing the idea | Accessible name (aria-label and <title>). |
| still | boolean | false | Show the static frame without motion, as under prefers-reduced-motion. |
Also accepts every <svg> attribute. Scales to its container (320–640px wide).
Accessibility
- One role="img" <svg> named by aria-label (and a matching <title>); every drawn part is aria-hidden.
- prefers-reduced-motion: reduce turns the animation off and leaves a static frame that still tells the story.
- Monochrome ink on surface (both flip with the theme); the accent appears only on a lit lamp, never as the only carrier of meaning.
- CSS animations only, loops of 6 s or less, no JavaScript and no timers.
Guidance
Do
- Use names your visitors recognise, in lower case as they appear in tool names.
Don’t
- Do not put text the reader needs only inside the drawing; say it in the page copy too.
- Do not crowd more than one moving illustration into a single viewport.