animate-itlisted

# animate-it Kiln decides what should move and why. This skill decides how to make it move correctly -- easing, duration, implementation, and the invisible details that separate "has animation" from "feels right." Two modes: - **Implement mode**: component has no animation, needs some - **Review mode**: component has animation, something feels off ## The protocol Five steps. Skip the ones you don't need. ### Step 1 -- Gate Should this animate at all? | Frequency | Decision | |---|---| | 100+ times/day (keyboard shortcuts, command palette) | No animation. Ever. | | Tens of times/day (hover, list navigation) | Remove or drastically reduce | | Occasional (modals, drawers, toasts) | Standard animation | | Rare / first-time (onboarding, celebrations) | Can add delight | The exception at the top rows: focus-ring transitions and highlight movement at <=100ms are fine -- those are feedback, not ceremony. If the answer is "don't animate," stop here. Saying no is the most valuable thing this skill does. ### Step 2 -- Classify What kind of motion is this? Each type has different rules. | Type | Examples | Key constraint | |---|---|---| | Entrance / exit | Modal open, toast appear, dropdown | Exits faster than entrances | | Feedback | Button press, hover lift, error shake | Must be instant-feeling | | State transition | Tab switch, accordion, toggle | Preserve spatial context | | Scroll-triggered | Reveal on scroll, parallax | Trigger once, low threshold | | Continuous | Spin