Documentation

Introduction

Motionwind v2 is a shared Motion utility language for React, Vue, JavaScript, and React Native.

Motionwind v2

Motionwind brings Motion's animation model to Tailwind-like animate-* utility classes. Write interaction and transition intent next to your styles; the selected adapter turns that shared language into Motion or Reanimated behavior.

<button className="animate-hover:scale-110 animate-tap:scale-90 animate-focus:scale-105 animate-spring">
  Hover, press, or focus me
</button>

On the React compile-time path this becomes a motion.button with whileHover, whileTap, whileFocus, and transition props. The animation tokens disappear from className, ordinary CSS or Tailwind classes remain, and no runtime parser is shipped. Dynamic React/Vue classes, vanilla JavaScript, and React Native use explicit runtime adapters.

One language, four adapters

Every official package uses the registry and ParsedResult intermediate representation from motionwind-core.

Target	Package	Status	Execution model
React, Next.js, React/Vite	`motionwind-react`	Stable	Compile time by default; `mw.*` runtime fallback
Vue and Nuxt	`motionwind-vue`	Stable	Compile time by default; component runtime fallback
Vanilla JavaScript	`motionwind-vanilla`	Stable	DOM runtime backed by Motion
React Native and Expo	`motionwind-react-native`	Beta	`mw.*` runtime backed by Reanimated

Use the Compatibility Matrix before sharing a class across targets. Unsupported adapter features produce actionable diagnostics instead of being ignored silently.

Why Motionwind

Familiar and colocated

The grammar is predictable: animate-{gesture}:{property}-{value}. Hover, tap, focus, in-view, initial, enter, exit, and drag targets use the same property vocabulary, while duration, easing, spring, viewport, scroll, layout, and variant classes configure behavior.

Typed team conventions

motionwind.config.ts provides named duration, easing, and spring tokens, reusable presets, strict diagnostics, reduced-motion policy, plugins, and an adapter target.

import { defineConfig } from "motionwind-core";

export default defineConfig({
  adapter: "react",
  strict: true,
  reducedMotion: "user",
  tokens: {
    durations: { fast: 160 },
    springs: { responsive: { stiffness: 420, damping: 28 } },
  },
});

Motion-first, not Motion-replacing

Motionwind is intentionally designed for the common 80% of UI animation. Keep using direct Motion APIs for complex timelines, imperative control, custom motion values, or framework features outside an adapter's declared capability set. The two approaches can coexist in the same application.

Core syntax

Gestures: animate-hover:, animate-tap:, animate-focus:, animate-inview:, animate-drag:, animate-initial:, animate-enter:, and animate-exit:.
Properties: transforms such as scale, rotate, x, and y; visual values such as opacity; dimensions; colors; and adapter-specific SVG properties.
Transitions: animate-duration-*, animate-ease-*, animate-spring, spring physics, delays, repeats, and stagger settings.
Reuse: animate-preset-{name} and named variant definitions.