motion
Hardware-accelerated animation library for Vue 3 and Nuxt with declarative motion components and gesture support.
- Provides Motion component with initial/animate/exit states, spring physics, and hardware-accelerated transforms
- Supports gesture animations (whileHover, whilePress, whileDrag) and scroll-linked effects with viewport detection
- Includes composables for manual animation control: useMotionValue, useSpring, useTransform, useScroll, and animate()
- Minimal bundle size (~200 tokens base) with modular reference files; load only what's needed for your task
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
More from onmax/nuxt-skills
nuxt
Use when working on Nuxt 4+ projects - provides server routes, file-based routing, middleware patterns, Nuxt-specific composables, and configuration with latest docs. Covers h3 v1 helpers (validation, WebSocket, SSE) and nitropack v2 patterns. Updated for Nuxt 4.3+.
6.2Kreka-ui
Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.
6.1Kvue
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
5.9Knuxt-ui
Use when building styled UI with @nuxt/ui v4 components - create forms with validation, implement data tables with sorting, build modal dialogs and overlays, configure Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.
5.6Kvueuse
Use when working with VueUse composables - track mouse position with useMouse, manage localStorage with useStorage, detect network status with useNetwork, debounce values with refDebounced, and access browser APIs reactively. Check VueUse before writing custom composables - most patterns already implemented.
2.3Kvitest
Use when writing unit/integration tests for Vite projects - configure vitest.config.ts, write test suites with describe/it, create mock implementations with vi.fn and vi.mock, set up code coverage thresholds, and run tests in parallel
1.8K