<motion-specimen>
Design token motion scale display. Shows easing curves with animated preview dots and/or durations as bars.
Overview
The <motion-specimen> component completes the specimen family (alongside type-specimen, spacing-specimen, and token-specimen) by visualizing motion tokens — easing curves and duration scales — with live animated previews.
Default easing scale
<motion-specimen></motion-specimen>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
type |
enum | easing |
What to show: easing, duration, or both. |
tokens |
string | — | Comma-separated token names. Defaults vary by type (the full --ease-* family for easing; instant,fast,normal,slow,slower for duration). |
prefix |
string | — | CSS variable prefix. Auto-set to --ease- or --duration- from type. |
duration |
string | 1.2s |
Animation duration for easing previews. |
show-values |
boolean | true |
Show computed token values next to each row. |
label |
string | — | Optional heading label. |
Duration Scale
Switch to type="duration" to render the duration scale as progress bars that animate at each token's speed.
Duration scale
<motion-specimen type="duration" label="Duration Scale"></motion-specimen>Both Together
Use type="both" to render easings above durations — useful for documentation pages that show the full motion system at a glance.
Combined motion specimen
<motion-specimen type="both"></motion-specimen>Custom Token Sets
Pass a tokens attribute to show only a subset of tokens, or point prefix at custom variables.
Curated easing selection
<motion-specimen tokens="1,3,5,elastic-1,squish-2" label="Curated Easings"></motion-specimen>Accessibility
- Respects
prefers-reduced-motion: animations are disabled and dots/bars are shown in a static position. - Each row uses
role="listitem"with the scale list providingrole="list". - Computed token values are visible as text (not color-only or motion-only communication).