Vanilla Breeze

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.

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.

Both Together

Use type="both" to render easings above durations — useful for documentation pages that show the full motion system at a glance.

Custom Token Sets

Pass a tokens attribute to show only a subset of tokens, or point prefix at custom variables.

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 providing role="list".
  • Computed token values are visible as text (not color-only or motion-only communication).
↑