Motion & Interaction Designer
Design purposeful UI motion and micro-interactions with precise durations, easing curves, and accessibility fallbacks.
- Generate spring physics for React or React Native components
- Audit existing UI motion for accessibility and performance issues
- Create staggered entry animations for dashboards and list views
$8.99
· or 45 creditsSecure checkout via Stripe
Included in download
- Generate spring physics for React or React Native components
- Audit existing UI motion for accessibility and performance issues
Sample input
Design a slide-in transition for a side navigation panel using Framer Motion. It should feel snappy but organic.
Sample output
Side Nav Motion (Framer Motion)
- Transition: type: "spring", stiffness: 400, damping: 35
- Duration: 250ms
- Initial: { x: "-100%" }
- Animate: { x: 0 }
- Reduced Motion: { opacity: 1, x: 0, transition: { duration: 0 } } Logic: High stiffness ensures responsiveness.
Motion & Interaction Designer
Design purposeful UI motion and micro-interactions with precise durations, easing curves, and accessibility fallbacks.
$8.99
· or 45 creditsSecure checkout via Stripe
Included in download
- Generate spring physics for React or React Native components
- Audit existing UI motion for accessibility and performance issues
- Instant install
Sample input
Design a slide-in transition for a side navigation panel using Framer Motion. It should feel snappy but organic.
Sample output
Side Nav Motion (Framer Motion)
- Transition: type: "spring", stiffness: 400, damping: 35
- Duration: 250ms
- Initial: { x: "-100%" }
- Animate: { x: 0 }
- Reduced Motion: { opacity: 1, x: 0, transition: { duration: 0 } } Logic: High stiffness ensures responsiveness.
About This Skill
High-Fidelity UI Motion & Interaction Design
Transform static interfaces into fluid, purposeful user experiences. This skill bridges the gap between creative vision and implementation by providing precise motion values—durations, easing curves, and spring physics—calibrated to your specific tech stack.
What it does
This skill handles the heavy lifting of motion choreography. It eliminates guesswork by applying physics-based principles to UI transitions. It audits your current motion for accessibility, defines staggered entrance patterns, and provides copy-paste ready configurations for your components.
Why use this skill
- Precision over Adjectives: Stop asking for "bouncy" or "smooth." Get exact millisecond values and cubic-bezier coordinates.
- Stack-Specific: Tailored output for Framer Motion, CSS, React Native Reanimated, and more.
- Accessibility First: Every design includes a "prefers-reduced-motion" fallback strategy to ensure compliance.
- Physics-Driven: Uses duration-to-distance rules to ensure animations feel natural and responsive, never sluggish.
Supported Deliverables
Get your output as structured design specs, technical implementation checklists, or direct code-ready motion configurations.
Use Cases
- Generate spring physics for React or React Native components
- Audit existing UI motion for accessibility and performance issues
- Create staggered entry animations for dashboards and list views
- Define global motion system rules for consistent brand feel
- Implement standard 'prefers-reduced-motion' fallbacks for all transitions
Known Limitations
- Cannot generate video or GIF files directly.
- Does not test animations in a live browser.
- Limited to code-based motion specs, not visual design files like Lottie.
How to Install
mkdir -p ~/.claude/skills && curl -sL https://www.agensi.io/api/install/motion-interaction-designer -o /tmp/motion-interaction-designer.zip && unzip -o /tmp/motion-interaction-designer.zip -d ~/.claude/skills && rm /tmp/motion-interaction-designer.zipFree skills install directly. Paid skills require purchase - use the download button above after buying.
Reviews
No reviews yet - be the first to share your experience.
Only users who have downloaded or purchased this skill can leave a review.
Early access skill
Be the first to review this skill.
Only users who have downloaded or purchased this skill can leave a review.
Security Scanned
Passed automated security review
Permissions
No special permissions declared or detected
Compatible with SKILL.md-compatible agents including Claude Code and Cursor.