# Motionwind v2.0.0 — machine reference

Motionwind is a shared Motion-first utility language for React, Vue, browser
JavaScript, and React Native. It targets the common 80% of UI animation. Use
direct Motion/platform APIs for imperative timelines and adapter capability
gaps.

Public support tiers:
- Stable: React, Next.js, React/Vite, Vue/Vite, Nuxt, vanilla JavaScript
- Beta: React Native and Expo
- Community: third-party adapters without core-team guarantees

The public npm packages are version 2.0.0. Internal docs/example apps have
private versions and are not npm release versions.

Quick setup:
```bash
npx create-motionwind@2 init --dry-run
npx create-motionwind@2 init
npx create-motionwind@2 doctor
```

Adapter installs:
- React/Next/Vite: motionwind-react@2 motion motionwind-core@2
- Vue/Nuxt: motionwind-vue@2 motion-v @vueuse/core motionwind-core@2
- Vanilla: motionwind-vanilla@2 motion motionwind-core@2
- React Native/Expo: motionwind-react-native@2 react-native-reanimated
  react-native-gesture-handler nativewind motionwind-core@2

Core class grammar:
- animate-{gesture}:{property}-{value}
- gestures: hover, tap, focus, inview, drag, initial, enter, exit
- transitions: animate-duration-300, animate-delay-100, animate-ease-out,
  animate-spring, spring physics, repeats, stagger
- viewport: animate-once, animate-amount-50, animate-margin-100
- scroll: animate-scroll:y-[0,-200], animate-scroll:scaleX-[0,1]
- layout: animate-layout, animate-layout-position, animate-layout-id-card
- variants: animate-variant-hidden:opacity-0, animate-from-hidden,
  animate-to-visible, animate-exit-hidden
- presets: animate-preset-button-press or a configured preset

Configuration:
```ts
import { defineConfig } from "motionwind-core";

export default defineConfig({
  adapter: "react",
  strict: true,
  reducedMotion: "user",
  tokens: {
    durations: { fast: 160 },
    easings: { product: [0.22, 1, 0.36, 1] },
    springs: { responsive: { stiffness: 420, damping: 28 } },
  },
  presets: {
    pop: "animate-initial:scale-95 animate-enter:scale-100",
  },
});
```

React:
- Vite plugin must precede @vitejs/plugin-react and receives config.
- Next uses withMotionwind(nextConfig, motionwindConfig).
- Static tokens are compiled. Static tokens inside mixed template literals can
  also be compiled; a fully runtime animation value uses mw.*.
- mw.create(Component) is the typed design-system bridge and requires ref/prop
  forwarding.
- MotionwindProvider supplies config to runtime components.
- Supports gestures, in-view, scroll, drag, layout, variants, SVG, reduced
  motion. Exit requires AnimatePresence.

Vue:
- Vue/Vite uses createMotionwindTransform(config) plus MotionwindPlugin.
- Nuxt uses globally registered <Motionwind> runtime components.
- Dynamic :class uses Motionwind/mw/useMotionwind.
- Continuous animate-scroll:* is not mapped; use motion-v directly.

Vanilla:
- motionwind({ config, observe, respectReducedMotion, root, selector }) wires
  the DOM and returns cleanup.
- Supports initial/enter, hover/tap/focus, in-view, continuous scroll, SVG,
  reduced motion.
- Drag, layout, exit orchestration, and variant propagation are unsupported.

React Native beta:
- Runtime mw.* backed by Reanimated; Reanimated Babel/build setup is required.
- Explicit mapped components: View, Text, Image, ScrollView, FlatList,
  Pressable, TextInput.
- Supports initial/enter, tap/hover/focus where handlers exist, variants,
  reduced motion, and beta scroll values inside mw.ScrollView.
- Drag, layout, in-view classes, SVG/web properties emit diagnostics and need
  direct native APIs. Exit unmount orchestration is application-owned.
- Never present an unsupported native class as working or silently ignored.

ParsedResult is the stable Motion-first v2 intermediate representation. It
contains tailwindClasses, gestures, transition, viewport, dragConfig,
layoutConfig, scroll, variants, variantState, diagnostics, and hasMotion.

Tooling reads the shared registry: ESLint, Prettier, VS Code, Studio,
motionwind-unplugin, create-motionwind, and motionwind-mcp. The MCP server
validates, explains, optimizes, generates, and exposes motionwind://syntax.

Compatibility matrix: https://motionwind.xyz/docs/compatibility