Setup & Installation
openclaw skills install @leonaaardob/lb-motion-skill
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
npx clawhub install lb-motion-skill
What This Skill Does
Motion is an animation library for React, JavaScript, and Vue, evolved from Framer Motion. It provides hardware-accelerated animations with spring physics, scroll-linked effects, and gesture support. The core bundle starts at 2.3kb.
Motion replaces Framer Motion with a smaller bundle and broader framework support, including Vue and vanilla JavaScript, without sacrificing the familiar API.
When to use it
- Adding scroll-triggered fade-ins to a landing page
- Animating a React modal with spring entrance/exit
- Dragging and dropping cards in a Kanban board
- Creating a progress bar that tracks scroll position
- Staggering list items on page load
Example Workflow
Here's how your AI assistant might use this skill in practice.
INPUT
User asks: animate a list of cards so they fade in with a stagger on load
AGENT
- 1Import motion from motion/react
- 2Wrap each card in a motion.div component
- 3Set initial opacity to 0 and animate to 1
- 4Add a stagger delay using the delay prop with stagger() helper
- 5Apply a spring or duration transition
OUTPUT
Each card fades in sequentially with a 0.1s stagger on page load