Motion
Add hardware-accelerated Motion Vue (motion-v) animations, gestures, scroll effects, and layout transitions in Vue 3 or Nuxt 3 UIs.
Overview
Motion is an agent skill for the Build phase that guides Vue 3 and Nuxt 3 developers through Motion Vue (motion-v) APIs for gestures, scroll-linked animation, layout transitions, and composables.
Install
npx skills add https://github.com/onmax/nuxt-skills --skill motionWhat is this skill?
- Motion Vue (motion-v) port of Motion/Framer Motion for Vue 3 and Nuxt 3 with MIT license
- Covers declarative fades/slides/scales, hover/tap/drag gestures, scroll-linked and layout animations, and spring physics
- Documents when to prefer GSAP, @vueuse/motion, or CSS instead of motion-v
- Nuxt setup via motion-v/nuxt module; Vue 3 install with pnpm add motion-v
- Progressive reference layout (~200 tokens base, 500–1500 per sub-file) for components vs composables
- Progressive reference ~200 tokens base, 500–1500 per sub-file
- Stable line documented as motion-v 1.x
Adoption & trust: 1.7k installs on skills.sh; 674 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want Framer-quality interaction and layout animation in a Vue or Nuxt app but the motion-v API surface and alternatives are unclear.
Who is it for?
Indie builders shipping Nuxt 3 or Vue 3 frontends who need production-ready motion without hand-rolling CSS or importing the wrong animation stack.
Skip if: Teams needing complex SVG morph timelines or scroll-scrubbed sequences where the skill itself recommends GSAP over motion-v.
When should I use this skill?
Adding animations with Motion Vue (motion-v)—motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt.
What do I get? / Deliverables
You install and configure motion-v correctly, pick the right animation approach for the task, and implement components or composables following the skill’s progressive reference files.
- motion-v dependency and Nuxt module configuration
- Motion components or composable-based animation implementation
- Documented choice between motion-v, GSAP, CSS, or @vueuse/motion for the feature
Recommended Skills
Journey fit
How it compares
Reference skill for the motion-v library—not a generic CSS animation cheat sheet and not a backend or agent-tooling integration.
Common Questions / FAQ
Who is motion for?
Solo developers building Vue 3 or Nuxt 3 interfaces who want declarative motion, gestures, and layout transitions with a small, documented API.
When should I use motion?
During Build frontend work when adding fades, slides, hover/tap feedback, scroll-linked effects, or spring-based UI motion in a Nuxt or Vue app.
Is motion safe to install?
The skill is documentation and patterns for an MIT-licensed npm package; review the Security Audits panel on this Prism page and your usual dependency supply-chain checks.
SKILL.md
READMESKILL.md - Motion
# Motion Vue (motion-v) Animation library for Vue 3 and Nuxt. Production-ready, hardware-accelerated animations with minimal bundle size. **Current stable:** motion-v 1.x - Vue port of Motion (formerly Framer Motion) ## Overview Progressive reference for Motion Vue animations. Load only files relevant to current task (~200 tokens base, 500-1500 per sub-file). ## When to Use **Use Motion Vue for:** - Simple declarative animations (fade, slide, scale) - Gesture-based interactions (hover, tap, drag) - Scroll-linked animations - Layout animations and shared element transitions - Spring physics animations **Consider alternatives:** - **GSAP** - Complex timelines, SVG morphing, scroll-triggered sequences - **@vueuse/motion** - Simpler API, less features, smaller bundle - **CSS animations** - Simple transitions without JS ## Installation ```bash # Vue 3 pnpm add motion-v # Nuxt 3 pnpm add motion-v @vueuse/nuxt ``` ```ts // nuxt.config.ts - Nuxt 3 setup export default defineNuxtConfig({ modules: ['motion-v/nuxt'], }) ``` ## Quick Reference | Working on... | Load file | | ---------------------------- | ------------------------- | | Motion component, gestures | references/components.md | | useMotionValue, useScroll | references/composables.md | | Animation examples, patterns | references/examples.md | ## Loading Files **Consider loading these reference files based on your task:** - [ ] [references/components.md](references/components.md) - if using Motion component, gestures, or layout animations - [ ] [references/composables.md](references/composables.md) - if using useMotionValue, useScroll, useSpring, or animate() - [ ] [references/examples.md](references/examples.md) - if looking for animation patterns or inspiration **DO NOT load all files at once.** Load only what's relevant to your current task. ## Core Concepts ### Motion Component Render any HTML/SVG element with animation capabilities: ```vue <script setup lang="ts"> import { motion } from 'motion-v' </script> <template> <motion.div :initial="{ opacity: 0, y: 20 }" :animate="{ opacity: 1, y: 0 }" :exit="{ opacity: 0, y: -20 }" :transition="{ duration: 0.3 }" > Animated content </motion.div> </template> ``` ### Gesture Animations ```vue <motion.button :whileHover="{ scale: 1.05 }" :whilePress="{ scale: 0.95 }" :transition="{ type: 'spring', stiffness: 400 }" > Click me </motion.button> ``` ### Scroll Animations ```vue <motion.div :initial="{ opacity: 0 }" :whileInView="{ opacity: 1 }" :viewport="{ once: true, margin: '-100px' }" > Appears on scroll </motion.div> ``` ## Available Guidance **[references/components.md](references/components.md)** - Motion component variants, animation props, gesture props, layout animations, transition configuration **[references/composables.md](references/composables.md)** - useMotionValue, useSpring, useTransform, useScroll, useInView, animate() **[references/examples.md](references/examples.md)** - External resources, component libraries, animation patterns and inspiration # Motion Component API ## Import Patterns ### motion (lowercase) - Standard pattern The standard way to use motion-v with dot notation: ```vue <script setup> import { motion } from 'motion-v' </script> <template> <motion.div /> </template> ``` ### Motion (capital) - Primitive pattern Alternative pattern using `as` prop. Useful when element type needs to be dynamic at runtime: ```vue <script setup> import { Motion } from 'motion-v' </script> <template> <Motion as="div" /> </template> ``` **Use `motion` (lowercase) throughout this guide** - it's preloaded with all features. ## Component Variants The `motion` component wra