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

**Load one file at a time based on context:**

- Component animations → [references/components.md](references/components.md)
- Composables, motion values → [references/composables.md](references/composables.md)
- Examples, inspiration → [references/examples.md](references/examples.md)

## 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=