# Skill: Apply microanimation timing, easing, and amplitude to UI elements

> Master this to add purposeful UI motion that confirms actions and guides attention without distracting users; apply whenever building or reviewing interactive components.

Source: sodigi*learn -- inspiration/mikroanimacii * https://sodigi.io/learn/inspiration/mikroanimacii

## When to use

- Adding or reviewing hover, press, focus states on buttons, toggles, or links.
- Building appearing/disappearing elements: modals, toasts, dropdowns, tooltips.
- Implementing screen or section transitions.
- Any time an AI-generated animation feels "sticky," harsh, or show-offy.

## Core rules

- Animation is a language of feedback, not decoration. Every movement must explain something.
- Timing must be short: ~100ms for small responses (hover/press), ~300ms for larger transitions. Over 500ms on routine actions makes the interface feel slow.
- Easing must be non-linear: fast start, gentle stop (ease-out). Never use linear motion -- it reads as "machine."
- Amplitude must be small: a button lifts a few pixels, an icon nudges. Large movements annoy by the third repetition.
- Elements leaving the screen should disappear faster than they appeared.
- Always provide a static or instant fallback when the OS `prefers-reduced-motion` setting is active.
- Never animate everything. Only animate what explains the action or where to look next.
- Spring/bounce easing is a rare accent, not a default for every element.

## Procedure

1. Identify which interaction needs feedback: hover, press, appearance, disappearance, or state change.
2. Choose timing: small response ~100ms, medium transition ~250-350ms, large panel ~300-400ms.
3. Choose easing: ease-out (fast start, smooth brake) for almost all cases. Reserve spring for rare accent moments.
4. Choose amplitude: pixels, not tens of pixels. A button lifts 2-3px. A modal floats up 8-12px from below.
5. Make exits faster than entrances.
6. Add the reduced-motion branch: swap movement for an instant or opacity-only change.
7. Trigger the interaction three times in a row. If it feels annoying by the third, shorten duration or shrink amplitude.

## Ready-to-use prompt

```
Add microanimations to the button:
- Hover: lifts slightly (2-3px translateY), brightens a touch, shadow grows softly.
- Press: sinks in (1-2px translateY), shadow shrinks, as if a physical key were pushed.
- Duration: ~100ms for hover and press responses.
- Easing: fast start, gentle stop at the end -- no linear motion, no abrupt halt.
- Amplitude: small, the movement barely noticeable.
- All transitions smooth, no instant jumps.
- Reduced-motion variant: instant color change, no movement or scaling.

For the modal:
- Backdrop fades in softly.
- Window floats up ~12px from below and scales from 0.97 to 1.0.
- Entry duration ~300ms, exit noticeably faster (~180ms).
- Easing: gentle stop at the end, no spring bounce.
- Reduced-motion: window appears with no shift or scaling, only a fast opacity fade.
```

## Pitfalls

- Duration over 500ms on ordinary actions makes the page feel sticky and slow.
- Linear easing (constant speed) gives off a "cheap machine" impression -- always add acceleration/deceleration.
- Oversized amplitude: elements flying across the screen are impressive once and infuriating at the tenth encounter.
- Animating every element: when everything moves, the main action gets lost and eyes tire.
- Elements dissolving slowly on exit: removing things should be faster than showing them.
- Ignoring `prefers-reduced-motion`: for some users animation causes real physical discomfort.
- Spring bounce on everything: striking once, distracting forever -- reserve it for rare emphasis.