More screenshots

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    Motion & Interaction Designer

    1

    High-Fidelity UI Motion & Interaction Design Transform static interfaces into fluid, purposeful user experiences.

    $8.99

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    3 usesSecurity scanned
    Motion & Interaction Designer

    Motion & Interaction Designer

    Example session with this skill installed

    Design a slide-in transition for a side navigation panel using Framer Motion. It should feel snappy but organic.

    • Read your context and instructions
    • Compiled the motion & interaction

    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.

    Connects securely to your tools. The creator never sees your data.

    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.

    • 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 use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before any payment.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill goes through the trust checks below.

    Security scanned

    Checked by our 8-point scan before listing

    3 uses

    Times used to date

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scan

    Security scan passed 4 months ago

    Permissions

    No special permissions declared or detected

    Listed4 months ago
    Updated11 days ago

    What's inside

    Frequently Asked Questions

    This skill converts abstract design concepts into precise technical values like cubic-bezier coordinates, spring physics (stiffness/damping), and millisecond durations, specifically tailored for frontend implementation.

    The skill identifies 'reduced motion' requirements for users with vestibular sensitivities and automatically provides CSS or JavaScript alternatives to ensure your animations remain inclusive and compliant.

    Yes, you can specify your framework—such as Framer Motion, CSS Keyframes, Swift UI, or React Native Reanimated—and the skill will format all motion specs to work directly with that syntax.

    By purchasing this skill, you gain full access to its motion choreography logic and documentation, allowing you to generate unlimited animation specs and interaction audits for your projects.

    Simply supply the skill with your existing UI component details, the desired user action (e.g., a button click or page transition), and your target tech stack to receive a complete motion specification.

    This skill is designed to integrate seamlessly with leading LLM-based agents; once added to your workspace, you can invoke it whenever you need to refine an interface's movement or feel.