# Before/after demo

Canonical: https://motionspec.dev/before-after

Before / after: reduced-motion in action — MotionSpec

Skip to content

MotionSpec

Playground
Motion check
Guides
GitHub
Become a partner

## Reduced motion, made visible.

Same page, twice. The checker flagged 10 issues on the left — animation with no prefers-reduced-motion guard. Flip the switch to simulate a visitor who asked their device for less motion, and watch what changes.

Simulate “Reduce motion”

Mirrors the OS setting a real user with a vestibular disorder would turn on. (This page also honours your real setting.)

## Before as the AI shipped it — no guard

▶ motion on ⚠ still animating — ignores the setting

Nimbus Start free trial

ACME GLOBEX INITECH HOOLI STARK ACME GLOBEX INITECH HOOLI STARK

↓

## After checker’s fixes applied — guarded

▶ motion on ✓ calm — respects the setting

Nimbus Start free trial

ACME GLOBEX INITECH HOOLI STARK ACME GLOBEX INITECH HOOLI STARK

↓

What you’re seeing. With reduce-motion on, the Before pane keeps spinning, pulsing and scrolling — it never asked. The After pane goes still, because each animation is wrapped in @media (prefers-reduced-motion: reduce) , exactly the fix the checker prints for every candidate.

The free checker detects the gap and hands you the fix. going further the MotionSpec engine emits motion that’s reduced-motion-safe by construction — so the “before” never ships. (A static CSS scan, not a full accessibility audit.)

Generating web UI at scale? See the Design Partner Program.

MotionSpec checks and compiles UI animation for AI-generated web apps — it does not generate AI video.

MotionSpec   — an open‑core motion trust layer.
hello@motionspec.dev npm Free motion check Before/after Playground Guides About MCP docs Pricing Impressum Datenschutz

Built by Fröba Sales Solutions UG (haftungsbeschränkt), Kronach, Germany. MotionSpec enforces reduced‑motion safety and a performance budget for the motion it compiles; it is not a general accessibility guarantee and does not claim conformance with any specific accessibility law. The free check covers specific motion criteria only. Performance figures are from one pilot deployment under the stated conditions. © 2026 Fröba Sales Solutions UG (haftungsbeschränkt).