### React Quick Start Guide

Source: https://llms.motion.dev/docs/index

Get started with Motion for React using this installation guide and interactive examples.

```markdown
[Get started with Motion for React](/docs/react-quick-start.md)
```

--------------------------------

### Get Started with Motion for Vue

Source: https://llms.motion.dev/docs/index

This guide covers the installation process for Motion within a Vue.js project and provides interactive examples to help you quickly start animating.

```bash
npm install motion-vue
# or
yarn add motion-vue
```

--------------------------------

### React Upgrade Guide

Source: https://llms.motion.dev/docs/index

Follow this guide to upgrade to the latest version of Motion for React.

```markdown
[Upgrade guide](/docs/react-upgrade-guide.md)
```

--------------------------------

### React Reduce Bundle Size Guide

Source: https://llms.motion.dev/docs/index

Understand Motion's bundle size and learn how to reduce it for React projects.

```markdown
[Reduce bundle size](/docs/react-reduce-bundle-size.md)
```

--------------------------------

### React Accessibility Guide

Source: https://llms.motion.dev/docs/index

Learn how to design accessible animations using Motion for React.

```markdown
[Accessibility](/docs/react-accessibility.md)
```

--------------------------------

### React Animation Guide

Source: https://llms.motion.dev/docs/index

Learn animation techniques in Motion for React, including springs, exit animations, layout animations, and scroll animations.

```markdown
[React animation](/docs/react-animation.md)
```

--------------------------------

### Radix Integration with Motion

Source: https://llms.motion.dev/docs/index

Animate Radix components with Motion for React, adding layout, exit, and spring animations with live code examples.

```markdown
[Integrate Motion with Radix](/docs/radix.md)
```

--------------------------------

### Create Press Gestures with Motion

Source: https://llms.motion.dev/docs/index

Implement press gestures using Motion's press() function. Its straightforward API allows handling press start, end, and cancel events, automatically filtering secondary events and providing keyboard accessibility.

```JavaScript
import { press } from "motion"

press("#my-button", () => {
  // ...
})

```

--------------------------------

### Framer Integration with Motion

Source: https://llms.motion.dev/docs/index

Use Motion for React in your Framer projects with this guide for code components and overrides.

```markdown
[Framer](/docs/framer.md)
```

--------------------------------

### Integrate Motion with Radix for Vue Animations

Source: https://llms.motion.dev/docs/index

Learn how to animate Radix components with Motion for Vue. Easily add layout, exit, and spring animations to your Radix components with live code examples.

```markdown
- [Integrate Motion with Radix](/docs/vue-radix.md): Learn how to animate Radix components with Motion for Vue. Easily add layout, exit and spring animations to your Radix components. With live code examples for Tabs, Tooltip and more.
```

--------------------------------

### React useDragControls Hook

Source: https://llms.motion.dev/docs/index

Manually start or stop dragging a motion component with the useDragControls hook in React.

```markdown
[useDragControls](/docs/react-use-drag-controls.md)
```

--------------------------------

### React Layout Animations

Source: https://llms.motion.dev/docs/index

Create layout and shared layout animations with Motion for React.

```markdown
[Layout animations](/docs/react-layout-animations.md)
```

--------------------------------

### Utilize Motion's Animation Frame Loop

Source: https://llms.motion.dev/docs/index

Learn about Motion's high-performance animation loop and how to leverage it for batching read and write operations per animation frame, optimizing rendering performance.

```JavaScript
import { frame } from "motion"

frame(() => {
  // Code to be executed on each animation frame
})

```

--------------------------------

### Create Layout Animations in Motion for Vue

Source: https://llms.motion.dev/docs/index

Learn to create dynamic layout and shared layout animations with Motion for Vue. This enables smooth transitions when elements change position or size in the DOM.

```Vue
<template>
  <motion.div layout>
    Animated Layout
  </motion.div>
</template>

<script>
import { motion } from "motion-vue"

export default {
  components: { motion }
}
</script>

```

--------------------------------

### React Motion Values Overview

Source: https://llms.motion.dev/docs/index

Learn to use Motion's motion values for performant state and velocity tracking in React.

```markdown
[Motion values overview](/docs/react-motion-value.md)
```

--------------------------------

### React Three Fiber Motion Integration

Source: https://llms.motion.dev/docs/index

Learn how to use Motion for React with React Three Fiber for 3D animations.

```markdown
[Motion for React Three Fiber](/docs/react-three-fiber.md)
```

--------------------------------

### Create Physics-Based Animations with Motion's Spring

Source: https://llms.motion.dev/docs/index

Learn to use Motion's spring generator to create realistic physics-based animations. This function allows for natural-looking motion with properties like stiffness and damping.

```JavaScript
import { spring } from "motion"

const springAnimation = spring({
  damping: 10,
  stiffness: 100
})

```

--------------------------------

### React Gestures Animation

Source: https://llms.motion.dev/docs/index

Learn to use Motion for React's gesture system to trigger animations and events.

```markdown
[Gestures](/docs/react-gestures.md)
```

--------------------------------

### Use Gestures in Motion for Vue

Source: https://llms.motion.dev/docs/index

Explore Motion for Vue's powerful gesture system for triggering animations and events. Learn how to implement interactions like hover, press, and drag.

```Vue
<template>
  <motion.div :whileHover="{ scale: 1.1 }">
    Hover me!
  </motion.div>
</template>

<script>
import { motion } from "motion-vue"

export default {
  components: { motion }
}
</script>

```

--------------------------------

### Create CSS Spring Animations with Motion

Source: https://llms.motion.dev/docs/index

Learn how to create physics-based spring animations purely in CSS using Motion's spring function. This allows for performant animations directly within your stylesheets.

```CSS
/* Example usage within a CSS context, though Motion's API is JS-driven */
/* Motion's JS API would generate or apply these styles */

```

--------------------------------

### Animate with Motion for Vue

Source: https://llms.motion.dev/docs/index

Learn the fundamentals of animating with Motion for Vue. This section covers various animation types including springs, exit animations, layout animations, and scroll animations.

```Vue
<template>
  <motion.div :animate="{ opacity: 0.5, scale: 2 }">
    Hello Motion!
  </motion.div>
</template>

<script>
import { motion } from "motion-vue"

export default {
  components: { motion }
}
</script>

```

--------------------------------

### React Reorder Components

Source: https://llms.motion.dev/docs/index

Create simple drag-to-reorder effects with Motion for React's Reorder components.

```markdown
[Reorder](/docs/react-reorder.md)
```

--------------------------------

### React LazyMotion Component

Source: https://llms.motion.dev/docs/index

Reduce Motion for React's bundle size by lazy-loading functionality with the LazyMotion component.

```markdown
[LazyMotion](/docs/react-lazy-motion.md)
```

--------------------------------

### React Three Fiber Layout Cameras

Source: https://llms.motion.dev/docs/index

Use perspective and orthographic cameras that integrate with Framer Motion's layout animations in React Three Fiber.

```markdown
[Layout cameras](/docs/react-three-fiber-layout-cameras.md)
```

--------------------------------

### Configure Transitions in Motion for Vue

Source: https://llms.motion.dev/docs/index

Learn how to configure transitions in Motion for Vue, defining how values animate between states. Customize durations, easing functions, springs, and more for fine-grained control over animation behavior.

```Vue
<template>
  <motion.div
    :animate="{ opacity: 1 }"
    :transition="{ duration: 0.5, ease: 'easeOut' }"
  >
    Smooth Transition
  </motion.div>
</template>

<script>
import { motion } from "motion-vue"

export default {
  components: { motion }
}
</script>

```

--------------------------------

### MotionConfig Component for Vue Default Transitions

Source: https://llms.motion.dev/docs/index

Learn how to use the MotionConfig component to set a default transition for all components, define reduced motion settings, or set a security policy in Motion for Vue.

```markdown
- [MotionConfig](/docs/vue-motion-config.md): Learn how use the MotionConfig component to set a default transition for all components, define reduced motion settings, or set a security policy.
```

--------------------------------

### React Scroll Animations

Source: https://llms.motion.dev/docs/index

Create scroll-linked and scroll-triggered animations in React using Motion.

```markdown
[Scroll animations](/docs/react-scroll-animations.md)
```

--------------------------------

### React useAnimationFrame Hook

Source: https://llms.motion.dev/docs/index

Create an animation loop that runs a callback every frame using useAnimationFrame in React.

```markdown
[useAnimationFrame](/docs/react-use-animation-frame.md)
```

--------------------------------

### Implement Hover Gestures with Motion

Source: https://llms.motion.dev/docs/index

Learn to create robust hover gestures using Motion's hover() function. It intelligently filters touch events to prevent common UI issues and broken behavior on touch devices.

```JavaScript
import { hover } from "motion"

hover(element, (isHovering) => {
  // ...
})

```

--------------------------------

### React MotionConfig Component

Source: https://llms.motion.dev/docs/index

Use MotionConfig to set default transitions, reduced motion settings, or security policies for all components in Motion for React.

```markdown
[MotionConfig](/docs/react-motion-config.md)
```

--------------------------------

### React Transitions Configuration

Source: https://llms.motion.dev/docs/index

Configure transitions in Motion for React to define how values animate between states, including durations, curves, and springs.

```markdown
[Transitions](/docs/react-transitions.md)
```

--------------------------------

### Track Values with Motion Values

Source: https://llms.motion.dev/docs/index

Learn to use Motion Values for efficiently tracking the state and velocity of animated values. This provides a performant way to manage dynamic data within animations.

```JavaScript
import { motionValue } from "motion"

const x = motionValue(0)

x.on("change", (latest) => {
  // ...
})

```

--------------------------------

### React AnimatePresence Component

Source: https://llms.motion.dev/docs/index

Implement exit animations quickly with Motion for React's AnimatePresence component.

```markdown
[AnimatePresence](/docs/react-animate-presence.md)
```

--------------------------------

### React useMotionTemplate Hook

Source: https://llms.motion.dev/docs/index

Combine multiple motion values with a string template using the useMotionTemplate hook in React.

```markdown
[useMotionTemplate](/docs/react-use-motion-template.md)
```

--------------------------------

### Implement Scroll Animations in Motion for Vue

Source: https://llms.motion.dev/docs/index

Discover how to create scroll-linked and scroll-triggered animations using Motion for Vue. This allows for interactive experiences that respond to user scrolling.

```Vue
<template>
  <motion.div :style="{ y: scrollYProgress }">
    Scroll me!
  </motion.div>
</template>

<script>
import { motion, useScroll } from "motion-vue"
import { computed } from 'vue'

export default {
  components: { motion },
  setup() {
    const { scrollYProgress } = useScroll()
    return { scrollYProgress }
  }
}
</script>

```

--------------------------------

### useSpring Hook for Vue Spring Animations

Source: https://llms.motion.dev/docs/index

useSpring creates a motion value that animates to its target with a spring in Motion for Vue. This provides a natural, physics-based animation feel.

```markdown
- [useSpring](/docs/vue-use-spring.md): useSpring creates a motion value that animates to its target with a spring.
```

--------------------------------

### useAnimationFrame Hook for Vue Animation Loops

Source: https://llms.motion.dev/docs/index

Create an animation loop that runs a callback every frame using the useAnimationFrame hook in Motion for Vue. This is ideal for continuous animations.

```markdown
- [useAnimationFrame](/docs/vue-use-animation-frame.md): Create an animation loop that runs a callback every frame.
```

--------------------------------

### Transform and Map Values with Motion

Source: https://llms.motion.dev/docs/index

Learn how to use Motion's transform() function to map values from one range to another. This is essential for creating custom animation curves and value transformations.

```JavaScript
import { transform } from "motion"

const scale = transform([0, 100], [1, 2])

console.log(scale(50)) // Output: 1.5

```

--------------------------------

### React useAnimate Hook

Source: https://llms.motion.dev/docs/index

Create an animate function with animation controls, timelines, scoped selectors, and automatic cleanup using useAnimate in React.

```markdown
[useAnimate](/docs/react-use-animate.md)
```

--------------------------------

### Create Scroll-Linked Animations with Motion

Source: https://llms.motion.dev/docs/index

Discover how to create parallax and scroll-linked animations using Motion's scroll() function. This function is backwards-compatible and utilizes ScrollTimeline for hardware-accelerated animations where available.

```JavaScript
import { scroll } from "motion"

scroll(
  ([latest]) => {
    "Motion: CSS: scroll"
    // ...
  },
  { target: document.querySelector("#scroll-target") }
)

```

--------------------------------

### Animate Elements with Motion

Source: https://llms.motion.dev/docs/index

Learn how to use Motion's animate() function to animate an element to a target value using hardware-accelerated animations. This function is central to creating dynamic visual effects.

```JavaScript
import { animate } from "motion"

animate("#my-element", { opacity: 0.5, scale: 2 })

```

--------------------------------

### Loop Numbers Infinitely with Motion's Wrap

Source: https://llms.motion.dev/docs/index

Understand how to use the wrap() function to keep numbers within a specified range, creating infinite looping effects. This is perfect for cyclical animations or data visualization.

```JavaScript
import { wrap } from "motion"

const loopedValue = wrap(0, 10)

console.log(loopedValue(15)) // Output: 5

```

--------------------------------

### useAnimate Hook for Vue Animation Controls

Source: https://llms.motion.dev/docs/index

Create an animate function with animation controls, timelines, scoped selectors, and automatic cleanup using the useAnimate hook in Motion for Vue.

```markdown
- [useAnimate](/docs/vue-use-animate.md): Create an animate function with animation controls, timelines, scoped selectors and automatic cleanup.
```

--------------------------------

### Reorder Component for Vue Drag-to-Reorder Effects

Source: https://llms.motion.dev/docs/index

Learn how to create simple drag-to-reorder effects with Motion for Vue's Reorder components. This allows users to easily rearrange lists or elements.

```markdown
- [Reorder](/docs/vue-reorder.md): Learn how to create simple drag-to-reorder effects with Motion for Vue's Reorder components.
```

--------------------------------

### React useInView Hook

Source: https://llms.motion.dev/docs/index

A simple state hook for detecting when an element is within the viewport using useInView in React.

```markdown
[useInView](/docs/react-use-in-view.md)
```

--------------------------------

### Mix Values with Motion's Mix Function

Source: https://llms.motion.dev/docs/index

Explore Motion's powerful mix() function for interpolating between two values. It supports numbers, colors, complex strings, arrays, and objects, enabling smooth transitions between various data types.

```JavaScript
import { mix } from "motion"

const mixedValue = mix(0, 100, 0.5)

```

--------------------------------

### React useSpring Hook

Source: https://llms.motion.dev/docs/index

Use useSpring to create a motion value that animates to its target with a spring effect in React.

```markdown
[useSpring](/docs/react-use-spring.md)
```

--------------------------------

### Motion Values for Vue State and Velocity Tracking

Source: https://llms.motion.dev/docs/index

Learn how to use Motion's motion values, a performant way to track state and velocity in Vue.js applications. Motion values are essential for smooth animations.

```markdown
- [Motion values](/docs/vue-motion-value.md): Learn how to use Motion's motion values, a performant way to track state and velocity.
```

--------------------------------

### Stagger Animations with Motion

Source: https://llms.motion.dev/docs/index

Discover how to stagger animations across multiple elements using Motion's stagger() function. This is useful for creating sequential animation effects on lists or groups of elements.

```JavaScript
import { stagger } from "motion"

animate(".item", { opacity: 0 }, {
  delay: stagger(0.1)
})

```

--------------------------------

### React motion Component

Source: https://llms.motion.dev/docs/index

The motion component is a DOM element enhanced with 120fps animations and gestures in Motion for React.

```markdown
[motion](/docs/react-motion-component.md)
```

--------------------------------

### React useScroll Hook

Source: https://llms.motion.dev/docs/index

Create scroll-linked animations with Motion's useScroll hook in React.

```markdown
[useScroll](/docs/react-use-scroll.md)
```

--------------------------------

### React Three Fiber MotionCanvas

Source: https://llms.motion.dev/docs/index

Replace React Three Fiber's Canvas with MotionCanvas for linking Motion for React DOM and Three.js.

```markdown
[MotionCanvas](/docs/react-three-fiber-motion-canvas.md)
```

--------------------------------

### useMotionTemplate Hook for Vue Motion Value Combination

Source: https://llms.motion.dev/docs/index

Combine multiple motion values with a string template using the useMotionTemplate hook in Motion for Vue. This is useful for creating complex animated values.

```markdown
- [useMotionTemplate](/docs/vue-use-motion-template.md): Combine multiple motion values with a string template.
```

--------------------------------

### useDragControls Hook for Vue Manual Dragging

Source: https://llms.motion.dev/docs/index

Learn how to manually start/stop dragging a motion component with the useDragControls hook in Motion for Vue. This provides fine-grained control over drag interactions.

```markdown
- [useDragControls](/docs/vue-use-drag-controls.md): Learn how to manually start/stop dragging a motion component with the useDragControls hook.
```

--------------------------------

### LazyMotion Component for Vue Bundle Size Reduction

Source: https://llms.motion.dev/docs/index

Reduce the bundle size of Motion for Vue by lazy-loading functionality with the LazyMotion component. This improves performance by only loading necessary features.

```markdown
- [LazyMotion](/docs/vue-lazymotion.md): Reduce the bundlesize of Motion for Vue by lazy-loading functionality with the LazyMotion component.
```

--------------------------------

### React useTransform Hook

Source: https://llms.motion.dev/docs/index

Create a new motion value that transforms the output of one or more motion values using useTransform in React.

```markdown
[useTransform](/docs/react-use-transform.md)
```

--------------------------------

### useScroll Hook for Vue Scroll-Linked Animations

Source: https://llms.motion.dev/docs/index

Learn how to create scroll-linked animations with Motion's simple yet powerful useScroll hook for Vue. This hook enables animations that respond to user scrolling.

```markdown
- [useScroll](/docs/vue-use-scroll.md): Learn how to create scroll-linked animations with Motion's simple yet powerful useScroll hook.
```

--------------------------------

### useVelocity Hook for Vue Motion Value Velocity Tracking

Source: https://llms.motion.dev/docs/index

Create a motion value that tracks the velocity of another motion value using the useVelocity hook in Motion for Vue. This is useful for physics-based interactions.

```markdown
- [useVelocity](/docs/vue-use-velocity.md): Create a motion value that tracks the velocity of another motion value.
```

--------------------------------

### React LayoutGroup Component

Source: https://llms.motion.dev/docs/index

Animate layout changes across component groups using the LayoutGroup component in Motion for React.

```markdown
[LayoutGroup](/docs/react-layout-group.md)
```

--------------------------------

### React useVelocity Hook

Source: https://llms.motion.dev/docs/index

Create a motion value that tracks the velocity of another motion value using useVelocity in React.

```markdown
[useVelocity](/docs/react-use-velocity.md)
```

--------------------------------

### useInView Hook for Vue Viewport Detection

Source: https://llms.motion.dev/docs/index

A simple state hook for detecting when an element is within the viewport using useInView in Motion for Vue. This is useful for lazy loading or triggering animations.

```markdown
- [useInView](/docs/vue-use-in-view.md): A simple state hook for detecting when an element is within the viewport.
```

--------------------------------

### React useReducedMotion Hook

Source: https://llms.motion.dev/docs/index

A hook that determines if the user prefers reduced motion using useReducedMotion in React.

```markdown
[useReducedMotion](/docs/react-use-reduced-motion.md)
```

--------------------------------

### AnimatePresence Component for Vue Exit Animations

Source: https://llms.motion.dev/docs/index

Learn how to quickly make exit animations with Motion for Vue's AnimatePresence component. This component is used to animate elements when they are removed from the DOM.

```markdown
- [AnimatePresence](/docs/vue-animate-presence.md): Learn how to quickly make exit animations with Motion for Vue's AnimatePresence component.
```

--------------------------------

### React useTime Hook

Source: https://llms.motion.dev/docs/index

A motion value hook that updates every animation frame with the duration since creation in React.

```markdown
[useTime](/docs/react-use-time.md)
```

--------------------------------

### React useMotionValueEvent Hook

Source: https://llms.motion.dev/docs/index

Subscribe to motion value events from a React component using the useMotionValueEvent hook.

```markdown
[useMotionValueEvent](/docs/react-use-motion-value-event.md)
```

--------------------------------

### useTime Hook for Vue Animation Frame Timing

Source: https://llms.motion.dev/docs/index

A motion value that updates every animation frame with the duration, in milliseconds, since it was created, using the useTime hook in Motion for Vue.

```markdown
- [useTime](/docs/vue-use-time.md): A motion value that updates every animation frame with the duration, in milliseconds, since it was created.
```

--------------------------------

### useReducedMotion Hook for Vue Reduced Motion Preference

Source: https://llms.motion.dev/docs/index

A hook that determines whether the user prefers reduced motion using useReducedMotion in Motion for Vue. This helps create accessible animations.

```markdown
- [useReducedMotion](/docs/vue-use-reduced-motion.md): A hook that determines whether the user prefers reduced motion.
```

--------------------------------

### motion Component for Vue Animations and Gestures

Source: https://llms.motion.dev/docs/index

The motion component is a DOM element supercharged with 120fps animations and gestures in Motion for Vue. It provides a performant way to add interactive animations.

```markdown
- [motion](/docs/vue-motion-component.md): The motion component is a DOM element supercharged with 120fps animations and gestures.
```

--------------------------------

### Use Delay Function in Motion

Source: https://llms.motion.dev/docs/index

Understand how to use the delay() utility function, which is locked to the animation frame loop. This ensures precise timing for delayed animations.

```JavaScript
import { animate, delay } from "motion"

animate("#my-element", { opacity: 0 }, {
  delay: delay(1, "keyframe")
})

```

--------------------------------

### LayoutGroup Component for Vue Layout Animations

Source: https://llms.motion.dev/docs/index

Animate layout across component groups with the LayoutGroup component in Motion for Vue. This allows for synchronized animations when elements change their position or order.

```markdown
- [LayoutGroup](/docs/vue-layout-group.md): Animate layout across component groups with the LayoutGroup component.
```

--------------------------------

### useTransform Hook for Vue Motion Value Transformation

Source: https://llms.motion.dev/docs/index

useTransform creates a new motion value that transforms the output of one or more motion values in Motion for Vue. This allows for flexible value manipulation.

```markdown
- [useTransform](/docs/vue-use-transform.md): useTransform creates a new motion value that transforms the output of one or more motion values.
```

--------------------------------

### Detect Element Visibility with Motion's inView

Source: https://llms.motion.dev/docs/index

Utilize Motion's browser-native inView() function to detect when an element enters or leaves the viewport. This is crucial for performance optimizations and triggering animations based on visibility.

```JavaScript
import { inView } from "motion"

inView("#my-element", () => {
  // ...
})

```

--------------------------------

### useMotionValueEvent Hook for Vue Motion Value Events

Source: https://llms.motion.dev/docs/index

Subscribe to motion value events from a Vue component using the useMotionValueEvent hook. This allows you to react to changes in motion values.

```markdown
- [useMotionValueEvent](/docs/vue-use-motion-value-event.md): Subscribe to motion value events from a Vue component.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.