---
name: ui-motion-check
description: Reviews and applies lightweight UI motion patterns with accessibility-safe behavior. Use when adding animations, hover/tap interactions, or section reveal effects.
---

# UI Motion Check

## Objective
Keep motion elegant, subtle, and usable across mouse and touch devices.

## Motion Constraints
- Default transition duration: 160ms to 320ms.
- Use `ease-out` or similar soft easing.
- Animate `opacity` and `transform` before layout-affecting properties.
- Avoid infinite decorative loops unless essential.

## Accessibility
- Respect `prefers-reduced-motion` and disable non-essential animation.
- Preserve readability while animating.
- Do not hide key information behind motion-triggered states.

## Interaction Parity
- Provide equivalent touch behavior for hover effects.
- Ensure clickable areas stay large enough on mobile.
- Keep focus-visible styles clear when keyboard navigating.

## Verification Checklist
- No jank on section entry.
- No content shift due to animation.
- Reduced-motion mode is functional.
- Hover-only affordances are not required to complete tasks.