JackFieldIllustration
The hero piece: a rack panel of jacks with patch cords; a wave of light sweeps the field and signals run along the cords.
Examples
Animated
4.8 s loop: a diagonal wave lights each jack, then a signal runs along each cord.
Light
Dark
<JackFieldIllustration />Static frame
What prefers-reduced-motion visitors see, forced here with `still`.
Light
Dark
<JackFieldIllustration still />Usage
import { JackFieldIllustration } from '@switchboard/ui'
<JackFieldIllustration caption?="switchboard" />Props
Every component also takes mix, for css() and mixins applied after its own style.
JackFieldIllustration
| Prop | Type | Default | Description |
|---|---|---|---|
| caption | string | "switchboard" | Text on the label strip. |
| 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 it once, in the hero, beside the headline.
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.