CompactionIllustration
Pretty JSON has its repeated keys struck out, folds away, and a short TOON table takes its place while the token meter drops.
Examples
Animated
6 s loop: keys and braces are struck out, the JSON folds, TOON arrives, the count ticks 3,701 → 1,643.
Light
Dark
<CompactionIllustration before={3701} after={1643} />Static frame
What prefers-reduced-motion visitors see, forced here with `still`.
Light
Dark
<CompactionIllustration before={3701} after={1643} still />Usage
import { CompactionIllustration } from '@switchboard/ui'
<CompactionIllustration before?={3701} after?={1643} />Props
Every component also takes mix, for css() and mixins applied after its own style.
CompactionIllustration
| Prop | Type | Default | Description |
|---|---|---|---|
| before | number | 3701 | Tokens before compaction (measured: find_tools, 8 tools and 2 skills). |
| after | number | 1643 | Tokens after compaction. |
| 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 measured counts only, the same ones the TokenMeter shows.
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.