motion-design-engineer

Design physics-based UI motion with spring, tween, and decay parameters.

2|1|Updated May 17, 2026
One-click install
npx skills add https://github.com/rakibulism/agent-skills-os --skill motion-design-engineer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: motion-design-engineer
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/motion-design-engineer
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill motion-design-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design motion that feels natural instead of robotic by translating user interactions into realistic timing, momentum, resistance, and easing.

Core Features & Use Cases

  • Motion Diagnosis: Identifies why an animation feels stiff, abrupt, or disconnected from user input.
  • Physics-Based Animation Guidance: Recommends springs, tweens, or decay models based on the interaction and desired feeling.
  • Interactive Gesture Design: Covers drag velocity, rubber-banding, interruptible motion, and axis-lock behavior for swipeable or draggable UI.
  • Use Case: A product team is building a swipeable card stack and wants the release animation to feel light, responsive, and physically plausible rather than mechanically timed.

Quick Start

Ask the skill to diagnose your current interaction and specify the intended feel, such as a draggable drawer that should feel heavy but responsive.

Frequently Asked Questions about motion-design-engineer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make UI motion feel physically believable instead of robotic?

To make UI motion feel physically believable, you need to apply physics-based animation parameters like springs, tweens, or decay models that translate user interactions into realistic timing, momentum, and resistance, replacing mechanically timed transitions with natural movement.

Why does my draggable drawer animation feel stiff and abrupt?

A draggable drawer animation feels stiff and abrupt when it lacks realistic momentum and resistance. Diagnosing the interaction helps identify missing physics parameters, allowing you to apply spring models and velocity capture for a heavy but responsive feel.

What's the best way to handle velocity capture and rubber-banding for swipeable UI?

The best way to handle velocity capture and rubber-banding for swipeable UI is to implement gesture handling details that support interruptible motion and axis lock behavior, ensuring the release animation feels light and physically plausible.

When should I use spring animations versus decay models for interactive components?

Use spring animations versus decay models based on the specific interaction and desired feeling. Springs provide bounce and elastic resistance, while decay models handle momentum dissipation for state transitions, ensuring the motion matches the physical interaction.

Can I use physics-based easing for interruptible swipeable card stacks?

Yes, you can use physics-based easing for interruptible swipeable card stacks by configuring gestures with velocity capture and axis lock. This ensures the release animation feels light, responsive, and physically plausible during user interaction.

Do I need specific animation libraries to implement axis lock and rubber-banding?

You do not need specific animation libraries to implement axis lock and rubber-banding if you apply the correct physics parameters. The Skill provides the necessary gesture handling details and timing models to build these interactions natively.