Motion / v1.0.0

Calm status transition system

A motion language for loading, success, warning, and failure that reinforces state changes without delaying repeat work.

Audience

Product teams designing operational workflows with frequent saves, uploads, and background jobs.

Job to be done

Make state changes legible, interruptible, and consistent across product surfaces.

Design direction

Use opacity, short distance, and contained scale changes. Motion should explain continuity and feedback, not decorate an idle screen.

Hierarchy

01Immediate state label
02Changed object
03Progress or outcome
04Recovery action
05Secondary detail

Required proof

01Visible status text
02Deterministic progress when available
03Timestamp or completion detail for durable jobs

Required states

01Idle
02Pending
03Progressing
04Succeeded
05Warning
06Failed
07Cancelled
08Retrying

Responsive behavior

01Keep movement distances below 16px on compact screens
02Avoid viewport-wide travel for local state changes
03Preserve status text when controls wrap

Constraints

01Use transform and opacity for spatial motion
02Do not delay user input while an exit animation runs
03Keep repeated feedback shorter than first-run feedback

Accessibility

01Provide a no-motion path with the same final state
02Announce durable status changes through a polite live region
03Never rely on motion or color alone

Verification

01Interrupt each transition and confirm the UI reaches a valid state
02Run with reduced motion and no animation support
03Test rapid repeated actions for stale timers or duplicated announcements

Tradeoffs

01Short transitions protect speed but provide less visual emphasis for rare events
02A shared motion scale improves consistency but leaves less room for one-off expressive effects

Stack

ReactTailwind CSSMotion for React

Connected UI Grids assets

AnimatedContent Toast ProgressBar

Build handoff

Provider

You are an expert design engineer.

Build a reusable motion system: Calm status transition system.

**Purpose:** A motion language for loading, success, warning, and failure that reinforces state changes without delaying repeat work.

**Audience:** Product teams designing operational workflows with frequent saves, uploads, and background jobs.

**Job to be done:** Make state changes legible, interruptible, and consistent across product surfaces.

**Design style:** Use opacity, short distance, and contained scale changes. Motion should explain continuity and feedback, not decorate an idle screen.

**Visual hierarchy:** Immediate state label -> Changed object -> Progress or outcome -> Recovery action -> Secondary detail

**Responsiveness:** Keep movement distances below 16px on compact screens Avoid viewport-wide travel for local state changes Preserve status text when controls wrap

**Accessibility:** Provide a no-motion path with the same final state Announce durable status changes through a polite live region Never rely on motion or color alone

**Required proof:**
- Visible status text
- Deterministic progress when available
- Timestamp or completion detail for durable jobs

**Required states:**
- Idle
- Pending
- Progressing
- Succeeded
- Warning
- Failed
- Cancelled
- Retrying

**Expected technologies:**
- React
- Tailwind CSS
- Motion for React

**Constraints:**
- Use transform and opacity for spatial motion
- Do not delay user input while an exit animation runs
- Keep repeated feedback shorter than first-run feedback

**Verification:**
- Interrupt each transition and confirm the UI reaches a valid state
- Run with reduced motion and no animation support
- Test rapid repeated actions for stale timers or duplicated announcements

**Tradeoffs:**
- Short transitions protect speed but provide less visual emphasis for rare events
- A shared motion scale improves consistency but leaves less room for one-off expressive effects

**Brand inputs:**
- Motion duration scale
- Easing curve
- Status colors
- Status vocabulary
- Reduced-motion policy

**Deliver:** A production-ready motion implementation plus verification notes.

Use React + Tailwind. Keep it accessible and respect prefers-reduced-motion. Return only the component code.