Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →jpoindexter/interaction-and-motion
Reference-grade motion and micro-interaction system — duration scales, easing tokens, choreography, modern CSS (view transitions, scroll-driven, @starting-style, linear()), performance, and accessibility for any screen on any platform.
Passed 23 of 24 test cases with the skill, and 21 of 24 without it.
2 fixed21 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
We are standardizing CSS animation tokens. A team member assigned a 350ms duration token to button hover color changes and active press states. Recommend the correct duration band for these direct manipulation feedback cues.
| Checked | Without skill | With skill |
|---|---|---|
| Assigns a duration between 50ms and 100ms for immediate hover and press states. | Missed | Passed |
The instructions your model reads when the skill loads.
Motion is not decoration. Every animation answers a question the user is silently asking — Did that work? Where did this come from? What's happening now? What's most important? If a motion can't be tied to feedback, orientation, status, hierarchy, or earned delight, cut it. Gratuitous motion is latency you chose to add.
| Purpose | What it answers | Example |
|---|---|---|
| Feedback | "Did my action register?" | Button press depress, toggle slide, ripple |
| Orientation / continuity | "Where did this come from / go?" | Shared-element transition, sheet slides up from the bar that opened it |
| Status | "What is the system doing?" | Spinner, progress bar, skeleton shimmer, syncing pulse |
| Hierarchy | "What should I look at?" | Stagger reveals primary content first; the FAB scales in last |
| Delight | "This product has care" | Confetti on success, a spring on a like — rare, earned, skippable |
Rule: if you can't name the purpose, you have a bug, not a feature.
Tie duration to distance, size, and importance, not taste. Bigger/farther = longer. Enter slower than exit (entrances orient; exits get out of the way).
| Token | Duration | Use |
|---|---|---|
--motion-instant | 50–100ms | Hover tints, pressed states, color/opacity swaps |
--motion-fast | 150–200ms | Toggles, checkboxes, small icon swaps, tooltips |
--motion-base | 250–300ms | Most UI: dropdowns, popovers, tab/content swaps, cards |
--motion-slow | 350–450ms | Modals, sheets, drawers, page-level transitions |
--motion-slower | 450–600ms | Full-screen transitions, hero/onboarding, large travel |
Perception thresholds (Nielsen): ~100ms feels instant (direct manipulation budget). ~1s keeps flow of thought unbroken — anything under 1s needs no loader, just motion. >1s needs a progress indicator or the user assumes a freeze. Keep most UI transitions in the 200–300ms band; under 150ms reads as a glitch, over 500ms reads as sluggish.
:root {
--motion-instant: 80ms; --motion-fast: 180ms; --motion-base: 260ms;
--motion-slow: 400ms; --motion-slower: 550ms;
}
Asymmetry: a menu opens at
--motion-base(260ms, ease-out) and closes at--motion-fast(180ms, ease-in). The user already knows what's there — get it offscreen.
test cases passed, vs 21 / 24 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.