---
name: motion-and-microinteractions
description: Use for interaction design, animations, progressive blur, animated borders, liquid metal accents, transitions, gesture feedback, and motion quality review.
---

# Motion and Microinteractions

Use this skill when the task involves animation, hover states, transitions, gesture feedback, motion polish, or premium CSS effects.

## Motion principles

- Motion must explain state, continuity, hierarchy, or causality.
- Motion should be quick and interruptible.
- Provide reduced-motion behavior when meaningful.
- Do not animate everything.
- Avoid bounce-heavy, toy-like interactions unless the brand calls for it.

## Timing defaults

- Micro state changes: 120ms-180ms.
- Buttons, toggles, chips: 120ms-220ms.
- Popovers and menus: 160ms-240ms.
- Sheets and modals: 220ms-380ms.
- Route or screen transitions: 260ms-450ms.

## Premium accents

Use these only when requested or clearly appropriate:

- Progressive blur for sticky headers, scroll boundaries, or overlays.
- Border Beam for accent cards, active AI generation, upload/drop zones, or selected premium states.
- Liquid Metal for hero demos, premium product cards, or branded marketing surfaces.

Never use glow, neon, or gradients as a default substitute for good hierarchy.

## Verification

Check that animation does not hurt accessibility, content legibility, pointer accuracy, perceived performance, or platform norms.