Motion Specimen

Duration and easing preview components with interactive play-animation controls.

Duration Scale

Click "Play animation" to trigger all bars simultaneously and compare durations.

100ms

--motion-duration-100

200ms

--motion-duration-200

300ms

--motion-duration-300

500ms

--motion-duration-500

Easing Curves

Click "Play animation" to preview each easing function side by side.

linear

ease-out

cubic-bezier(0, 0, 0.2, 1)

ease-in

cubic-bezier(0.4, 0, 1, 1)

ease-in-out

cubic-bezier(0.4, 0, 0.2, 1)

Installation

npx visor add motion-specimen

This copies two files into your project:

components/ui/motion-specimen/motion-specimen.tsx — the component
components/ui/motion-specimen/motion-specimen.module.css — the styles

Usage

import { MotionDuration, MotionEasing } from '@/components/ui/motion-specimen/motion-specimen';

<MotionDuration durations={[
  { token: "--motion-duration-100", name: "100", ms: 100 },
  { token: "--motion-duration-200", name: "200", ms: 200 },
  { token: "--motion-duration-300", name: "300", ms: 300 },
  { token: "--motion-duration-500", name: "500", ms: 500 },
]} />

<MotionEasing easings={[
  { token: "--motion-easing-ease-out", name: "ease-out", value: "cubic-bezier(0, 0, 0.2, 1)" },
  { token: "--motion-easing-ease-in-out", name: "ease-in-out", value: "cubic-bezier(0.4, 0, 0.2, 1)" },
]} />

API Reference

Prop	Type	Default	Description
`durations`*	`MotionDurationItemProps[]`	—	Array of duration items with token, name, and ms values. (MotionDuration component)
`easings`*	`MotionEasingItemProps[]`	—	Array of easing items with token, name, and CSS value. (MotionEasing component)
`className`	`string`	—	Additional CSS class names to merge onto the element.

Motion specimen components respect prefers-reduced-motion. When the OS setting is active, the "Play animation" button triggers no visual motion — this is intentional and mirrors how production components should behave.

The interactive play button has an accessible label and keyboard support. No additional configuration is required.