Radii Motion

About

Motion is the most under-reviewed dimension of UI quality. Developers copy animations from Stack Overflow, forget prefers-reduced-motion, animate width instead of transform, and use linear easing everywhere. Radii Motion audits all animation and transition code in your project against Radii's motion principles: correct easing for each context (ease-out for entrances, ease-in for exits, spring for interactive), appropriate timing (80–300ms for micro-interactions, 300–500ms for page transitions), non-layout-thrashing properties (transform and opacity only for GPU-accelerated animations), and complete prefers-reduced-motion coverage. The output is a prioritised list of violations with specific, copy-paste fixes.

What it does

• Scans all CSS animation, @keyframes, transition, and JS animation library calls (framer-motion, GSAP, Rive, Lottie)
• Every fix includes a before/after CSS code block with the exact cubic-bezier value — no more looking up easing functions
• Includes a copy-paste spring animation template: button press at 80ms ease-in, spring back at 200ms cubic-bezier(0.34, 1.56, 0.64, 1)
• Flags timing violations with exact target ranges: micro-interactions 80–200ms, modals 200–350ms, spinners 700–900ms
• Detects layout-thrashing animation properties (width, height, top, left) — outputs the transform equivalent
• Identifies motion personality (snappy/calm/playful/professional) and flags personality inconsistencies between components

Give it

• 1.CSS files, component files, or animation configuration files
• 2.Optional: describe the intended motion personality (snappy / calm / playful / professional)
• 3.Optional: pass a Framer Motion, GSAP, or Rive config for library-specific review

Example output

**Motion audit — 12 violations found**

Critical (3):
  globals.css:44 — .modal-enter has no @media (prefers-reduced-motion) override → WCAG 2.3.3 failure
  Card.jsx:22 — Animating width and height (layout thrash) → use transform: scaleX()/scaleY() instead
  Nav.jsx:8 — transition: all 300ms — animates layout properties on hover → use transition: transform, opacity

Major (5):
  Button.jsx:15 — :hover transition uses ease-in (starts slow) → use ease-out for hover entrances
  Modal.jsx:31 — Entrance animation 600ms — too slow for a blocking UI element → target 250–350ms
  Spinner.jsx:4 — Rotation at 2s per turn — too slow (looks broken) → target 700–900ms
  HeroSection.jsx:88 — Five simultaneous entrance animations with no stagger → add 80ms stagger between items
  Form.jsx:44 — Error shake animation: linear easing → use ease-out for physical-feeling feedback

Minor (4): [see full report]

→ radii.cloud/terms/animation, radii.cloud/terms/spring-animation, radii.cloud/terms/motion-design