A high-performance animation skill for implementing Motion.dev (formerly Framer Motion) across React, Vue, and vanilla JavaScript projects.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install lb-motion-skill
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install lb-motion-skill using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Motion.dev Animation Library?
Motion.dev represents the next generation of animation libraries, serving as the evolution of Framer Motion. This skill provides comprehensive access to tools designed for building fluid, high-performance web animations with a minimal 2.3kb footprint. By incorporating this into your Openclaw Skills toolkit, you gain the ability to animate HTML, SVG, and JavaScript objects using hardware-accelerated techniques that ensure smooth user experiences across all devices.
The skill covers the versatile Motion API, which simplifies complex tasks like spring physics and gesture detection. Whether you are building a React application or working with vanilla JavaScript, this documentation ensures you can implement everything from basic transitions to complex scroll-triggered timelines with professional-grade precision.
Motion.dev Animation Library Use Cases
- Implementing production-grade animations in React, Vue, or vanilla JavaScript applications.
- Creating responsive, scroll-linked or scroll-triggered visual effects for landing pages.
- Developing gesture-based interactions including drag, hover, tap, and press states.
- Migrating existing Framer Motion implementations to the more performant Motion.dev engine.
- Optimizing web application performance by utilizing hardware-accelerated motion sequences.
How Motion.dev Animation Library Works
- Access the documentation through Openclaw Skills to identify the optimal animation method, such as the animate function or framework-specific components.
- Target specific DOM elements using CSS selectors or direct element references.
- Define keyframe properties for the animation, such as scale, rotation, or opacity.
- Configure transition settings including duration, easing, or spring physics parameters (stiffness, damping).
- Execute the animation logic or link it to external triggers like scroll position or user gestures.
Motion.dev Animation Library Setup
To integrate this skill into your project, install the core library using your preferred package manager:
npm install motion
For React-specific implementations, ensure you import the motion component from the correct entry point:
import { motion } from "motion/react"
Motion.dev Animation Library Data Schema & Taxonomy
The skill organizes animation logic and configuration through the following primary interfaces:
| API Method | Target | Primary Purpose |
|---|---|---|
animate() |
Elements / Objects | Direct imperative animations with full control |
<motion /> |
React/Vue Components | Declarative animation syntax for UI frameworks |
scroll() |
Viewport/Container | Linking animation progress to scroll offset |
stagger() |
Element Arrays | Coordinating timing across multiple child elements |
Motion.dev Animation Library Advanced Features
- Hardware-accelerated performance via the Motion One engine for sub-millisecond execution.
- Independent transform property handling to prevent layout thrashing during complex sequences.
- Full support for animating SVG paths and WebGL objects for advanced visualization.
- Flexible spring physics engine for creating natural, kinetic movement without fixed durations.
- Tiny bundle size (2.3kb) optimized for modern web performance budgets.
SKILL.md
Loading
Related Openclaw Skills
BMad Method
A 4-phase agile framework for AI coding agents to manage the full software development lifecycle from analysis to implementation.
Better Auth Documentation Integration
A comprehensive technical reference skill for implementing modern, secure authentication in TypeScript projects using AI agents.
Xiangji Translation Service
Xiangji Translation Service provides professional-grade text and image translation capabilities by integrating multiple global AI engines.
Multi-LLM Intelligent Switching
An intelligent model routing tool that switches between high-performance cloud LLMs and local Ollama instances based on task intent and user commands.
Pocket-TTS
Pocket-TTS is a lightweight, CPU-optimized text-to-speech engine that enables real-time streaming and voice cloning without requiring a GPU.
shadcn/ui Documentation Skill
A comprehensive, AI-ready documentation package for shadcn/ui components, theming, and framework integrations.
Featured*
