← ClaudeAtlas

interaction-motionlisted

Use when specifying or reviewing motion and interaction feel — transitions, gestures, feedback timing, loading and progress. Invoked by product-designer while composing screens and by any IC implementing an animated surface. Triggers whenever something moves, and whenever something takes long enough that the user must be told.
vmobifystudio/app-dev-team · ★ 4 · AI & Automation · score 74
Install: claude install-skill vmobifystudio/app-dev-team
# Interaction and motion Motion has one job: **tell the user what just happened and where they are now**. Motion that decorates costs battery, costs frames, and costs the users who cannot tolerate it. ## The durations Do not invent a duration. Use the token, and use the shortest one that reads: | Token | Use | |---|---| | `fast` 150ms ease-out | state feedback — press, toggle, ripple, checkbox | | `base` 250ms ease-in-out | element enters or leaves within a screen | | `slow` 400ms | full-screen transition, only when it carries spatial meaning | Anything longer than 400ms is not motion, it is a wait — and a wait needs progress, not an animation. ## Feedback timing | Elapsed | The interface owes the user | |---|---| | < 100ms | nothing — it feels instant | | 100ms–1s | immediate visual acknowledgement that the input landed | | 1s–10s | a determinate progress indicator if progress is knowable, an indeterminate one if not | | > 10s | the ability to leave and come back, and a way to cancel | A spinner with no cancel on a long operation is a trap; that is a reliability finding as much as a design one. ## The rules - **Motion must be interruptible.** A user tapping during an animation is answered immediately, not after it finishes. - **Position must be preserved.** An element that moves animates from where it was; an element that is replaced cross-fades. Getting this backwards is what makes an interface feel arbitrary. - **Respect reduce-motion.** `UIAccessibility.isRe