Motion

Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/NuxtFrom its SKILL.md

Install

npx -y skills add onmax/nuxt-skills --skill motion

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.3 KB, as published. Nobody here has run it

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

# Vue 3
pnpm add motion-v

# Nuxt 3
pnpm add motion-v @vueuse/nuxt

// 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 - if using Motion component, gestures, or layout animations
references/composables.md - if using useMotionValue, useScroll, useSpring, or animate()
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:

<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

<motion.button
  :whileHover="{ scale: 1.05 }"
  :whilePress="{ scale: 0.95 }"
  :transition="{ type: 'spring', stiffness: 400 }"
>
  Click me
</motion.button>

Scroll Animations

<motion.div
  :initial="{ opacity: 0 }"
  :whileInView="{ opacity: 1 }"
  :viewport="{ once: true, margin: '-100px' }"
>
  Appears on scroll
</motion.div>

Available Guidance

references/components.md - Motion component variants, animation props, gesture props, layout animations, transition configuration

references/composables.md - useMotionValue, useSpring, useTransform, useScroll, useInView, animate()

references/examples.md - External resources, component libraries, animation patterns and inspiration