ABSwitchIllustration
The agent’s cable re-patches from build A to build B; both answers land side by side and the changed line is marked.
Examples
Animated
6 s loop: patched to A, A answers; re-patched to B, B answers; the difference is marked.
Light
Dark
<ABSwitchIllustration builds={['local', 'staging']} tool="get_forecast" />Static frame
What prefers-reduced-motion visitors see, forced here with `still`.
Light
Dark
<ABSwitchIllustration builds={['local', 'staging']} tool="get_forecast" still />Usage
import { ABSwitchIllustration } from '@switchboard/ui'
<ABSwitchIllustration builds?={[a, b]} tool?="…" />Props
Every component also takes mix, for css() and mixins applied after its own style.
ABSwitchIllustration
| Prop | Type | Default | Description |
|---|---|---|---|
| builds | [string, string] | ['local', 'staging'] | Names of builds A and B. |
| tool | string | "get_forecast" | The tool both builds answered. |
| 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
- Pair it with the TargetBay or the sb use transcript that does the real switch.
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.