motion

What This Skill Does

The Motion skill enables OpenClaw to leverage the Motion.dev library (formerly Framer Motion) for advanced UI animations. It acts as an abstraction layer for modern web animation, allowing you to generate performant, hardware-accelerated code for React, JavaScript, and Vue environments. Whether you need simple transitions, physics-based spring animations, scroll-linked progress indicators, or gesture-based interactions like drag and hover, this skill provides the underlying syntax and structural patterns required to implement them seamlessly into your web projects.

Installation

To integrate this skill into your OpenClaw environment, use the following CLI command:

clawhub install openclaw/skills/skills/leonaaardob/lb-motion-skill

Once installed, ensure your project environment has the core library available via npm install motion so the generated code can interface with the runtime correctly.

Use Cases

This skill is highly effective for developers looking to enhance user experience through motion design. Use it to:

1. Create highly performant UI feedback loops (e.g., hover states, button feedback).
2. Implement complex scroll-triggered animations where site elements react to user progress.
3. Migrate legacy animation libraries like Framer Motion to the updated Motion.dev API.
4. Design kinetic, physics-based interactions that feel organic rather than robotic.

Example Prompts

• "OpenClaw, generate a Motion.dev script that rotates a div 360 degrees when it enters the viewport while scrolling."
• "Help me rewrite this legacy Framer Motion animation into the new Motion.dev React API format."
• "Create a staggered reveal animation for a list of items using the Motion.dev stagger utility."

Tips & Limitations

• Performance: Always prioritize GPU-accelerated properties like transform and opacity to maintain 60fps.
• Dependencies: Ensure your React or Vue project is compatible with the latest Motion.dev peer dependencies.
• Complexity: While Motion handles high-level animation well, avoid over-animating every UI element, as this can lead to accessibility issues and user fatigue.
• Scope: This skill facilitates the writing of animation code; it does not replace the need for CSS or component structural knowledge. Always verify that your target elements have appropriate CSS positioning for layout animations to function as expected.