Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From nuxt-skills
Provides declarative animations, gesture interactions, scroll-linked effects, layout transitions, and composables for Vue 3 and Nuxt using Motion Vue (motion-v).
npx claudepluginhub onmax/nuxt-skills --plugin nuxt-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/nuxt-skills:motionThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Animation library for Vue 3 and Nuxt. Production-ready, hardware-accelerated animations with minimal bundle size.
Provides 120+ animated Vue/Nuxt components using TailwindCSS v4, motion-v, GSAP, Three.js for hero sections, 3D effects, interactive backgrounds, and setup/integration error fixes.
Implements Motion (Framer Motion) animations in React for drag-and-drop, gestures, scroll effects, SVG morphing, layout transitions, spring physics, and bundle optimization.
Creates smooth React/JavaScript animations with Motion/Framer Motion: motion components, variants, gestures (hover/tap/drag), layout/exit animations, springs, scroll effects. For interactive UIs, micro-interactions, transitions.
Share bugs, ideas, or general feedback.
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)
Progressive reference for Motion Vue animations. Load only files relevant to current task (~200 tokens base, 500-1500 per sub-file).
Use Motion Vue for:
Consider alternatives:
# 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'],
})
| Working on... | Load file |
|---|---|
| Motion component, gestures | references/components.md |
| useMotionValue, useScroll | references/composables.md |
| Animation examples, patterns | references/examples.md |
Consider loading these reference files based on your task:
DO NOT load all files at once. Load only what's relevant to your current task.
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>
<motion.button
:whileHover="{ scale: 1.05 }"
:whilePress="{ scale: 0.95 }"
:transition="{ type: 'spring', stiffness: 400 }"
>
Click me
</motion.button>
<motion.div
:initial="{ opacity: 0 }"
:whileInView="{ opacity: 1 }"
:viewport="{ once: true, margin: '-100px' }"
>
Appears on scroll
</motion.div>
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