Motion & Microinteraction Spec Designer

    1

    Durations, easing, choreography and reduced-motion fallbacks — implementation-ready, not vibes.

    $7

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    Motion & Microinteraction Spec Designer

    Example session with this skill installed

    I need a motion spec for a modal drawer that slides in from the right on web. It contains a list of 5 items that should stagger in. Give me the Framer Motion code.

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

    I have designed the motion spec for the side drawer. This interaction uses a

    Medium duration for the container to feel responsive, with a

    Small stagger to orient the user to the list content without delaying the task.

    Side Drawer Motion Spec

    ElementPropertyFromToDurationEasingDelay
    OverlayOpacity01250msLinear0ms
    DrawerX (Translate)100%0%320mscubic-bezier(0.2, 0, 0, 1)0ms
    List ItemsY + Opacity16px, 00, 1180mscubic-bezier(0.05, 0.7, 0.1, 1)40ms stagger

    Implementation: Framer Motion

    const drawerVariants = {
  hidden: { x: "100%" },
  visible: {
    x: 0,
    transition: {
      duration: 0.32,
      ease: [0.2, 0, 0, 1],
      when: "beforeChildren",
      staggerChildren: 0.04
    }
  },
  exit: {
    x: "100%",
    transition: {
      duration: 0.25,
      ease: [0.4, 0, 1, 1]
    }
  }
};

const itemVariants = {
  hidden: { opacity: 0, y: 16 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: { duration: 0.18, ease: [0.05, 0.7, 0.1, 1] }
  }
};

    Accessibility (Reduced Motion)

    For users with prefers-reduced-motion: reduce, the x and y transforms are disabled. The drawer and items will use a simple

    150ms opacity crossfade to signal the state change without causing vestibular distress.

    Next steps

    1. Apply will-change: transform to the drawer container to ensure GPU acceleration.
    2. Verify the 40ms stagger timing on mobile devices to ensure the total sequence finishes under 500ms.
    3. Ensure focus is trapped within the drawer only after the 320ms entrance animation completes.

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

    About this skill

    The problem

    UI animations are often added as afterthoughts, leading to sluggish interfaces, jarring transitions, and accessibility failures. Developers struggle to translate vague "make it pop" requests into precise easing curves and performance-safe code.

    What it does

    • Generates implementation-ready motion specs including duration tokens, cubic-bezier curves, and spring physics.
    • Provides production-grade code snippets for CSS, Framer Motion, SwiftUI, and Jetpack Compose.
    • Audits existing UIs to identify redundant animations that drain battery or trigger vestibular issues.
    • Defines reduced-motion fallbacks to ensure compliance with accessibility standards like WCAG.
    • Calculates choreography and stagger timings for complex list reveals and page transitions.

    Frameworks & tools

    CSS/Web Animations API, React (Framer Motion), SwiftUI, Jetpack Compose, Lottie, Adobe After Effects, and Figma Smart Animate.

    Why this beats prompting it yourself

    General LLMs often suggest long durations (500ms+) or layout-thrashing properties like width and height. This skill enforces strict performance rules, using only GPU-accelerated transforms and opacity while adhering to a specialized motion-token system for design consistency.

    Use cases

    • Creating a motion design system for a React-based component library.
    • Specifying a shared-element transition for a mobile app onboarding flow.
    • Debugging jank by converting layout animations to FLIP-based transforms.
    • Generating accessible alternatives for users with motion sensitivities.

    Known limitations

    Does not support complex 3D character animation or physics engines outside of standard UI springs. High-node count animations require manual performance testing on target hardware.

    Does not support 3D character rigging. Focuses on UI transitions under 500ms. Requires manual verification for high-node count performance on low-end devices.

    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

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

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

    Trust & safety

    Security scan

    Security scan passed 1 month ago

    Permissions

    No special permissions declared or detected

    Listed1 month ago

    What's inside

    Frequently Asked Questions

    The Motion Spec Designer provides implementation-ready code for CSS (Web Animations API), Framer Motion, SwiftUI, and Jetpack Compose, ensuring your animations work across web and mobile platforms.

    Unlike general AI, this skill is specifically tuned to prioritize GPU-accelerated properties (like transforms and opacity) over layout-heavy properties, preventing performance 'jank' and battery drain.

    The skill automatically generates reduced-motion fallbacks and audits your specs against WCAG standards to ensure your interface is safe for users with vestibular or motion sensitivities.

    You will receive the core logic for the motion spec engine, a set of pre-defined motion tokens (easing/spring physics), and ongoing access to version updates as new animation libraries emerge.

    This skill is designed to integrate seamlessly with any AI agent capable of processing design requirements or code snippets, acting as a specialized technical consultant for your existing workflow.

    While it excels at UI transitions and microinteractions, it is not intended for character-based 3D animation or complex game physics engines outside of standard UI spring dynamics.

    New in Branding & Design