Backed byOSS Program

Motion, written like Tailwind.

Motionwind turns familiar utility classes into optimized Motion components during your build. Create expressive interactions without learning a new API or shipping a parser to your users.

Read the docs Open playground

Try it in the browser

Feel the difference

Every preview is powered by Motionwind classes. Hover, focus, drag, and scroll to see the same interactions you can use in your app.

Search Bar Focus

Hover and tap

Hover me, or tap me

Scroll reveal

I appear on scroll

Drag interaction

Drag me around

Infinite loop

Spring physics

Hover for springy bounce

Gesture prefixes

Gesture	Prefix	Use Case
Hover	`animate-hover:`	Buttons, cards, links, any pointer interaction
Tap	`animate-tap:`	Button press feedback, click effects
Focus	`animate-focus:`	Form inputs, accessibility focus indicators
Drag	`animate-drag:`	Draggable elements, sliders, sortable items
InView	`animate-inview:`	Scroll-triggered reveals, lazy animations
Initial	`animate-initial:`	Starting state for enter/inview animations
Enter	`animate-enter:`	Target state on mount
Exit	`animate-exit:`	Target state on unmount (requires AnimatePresence)

Why Motionwind

The convenience stays in development.

A build transform reads your animation classes and emits Motion props. The work happens before your code reaches the browser.

What you writesource.tsx

// No imports needed
<div
  className="
    animate-initial:opacity-0
    animate-initial:y-20
    animate-inview:opacity-100
    animate-inview:y-0
    animate-duration-500
    animate-once
    p-4 rounded-lg
  "
>
  Hello world
</div>

What gets compiledoutput.js

// Auto-injected by Babel
import { motion } from "motion/react"

<motion.div
  className="p-4 rounded-lg"
  initial={{ opacity: 0, y: 20 }}
  whileInView={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
  viewport={{ once: true }}
>
  Hello world
</motion.div>

Write classes

Add motionwind classes to any element or component. No imports, no wrappers.

animate-hover:scale-110

Babel transforms

At build time, classes are parsed and converted to Motion component props.

whileHover={{ scale: 1.1 }}

Ship zero overhead

Production bundle contains only optimized Motion components. No parser shipped.

0kb runtime added

Built for real interfaces

Use the full Motion vocabulary, without the ceremony.

Motionwind keeps the mental model small while giving you the primitives needed for polished, accessible UI.

Zero Runtime

Static classes compiled away at build time. No parser, no overhead in production.

Familiar Syntax

If you know Tailwind, you already know motionwind. Same utility-first approach.

8 Gesture Types

Hover, tap, focus, in-view, drag, initial, enter, and exit gestures.

Framework Ready

First-class integrations for Next.js and Vite. One line to configure.

Spring Physics

Stiffness, damping, mass, and bounce — all controllable through classes.

Drag Support

Enable dragging on any axis with elastic constraints.

Custom Components

Works on <Card>, <Button>, any component. No mw.* wrappers needed.

Template Literals

Static animate classes extracted from template literals at build time.

One readable pattern

Describe the interaction, then the motion.

Each class follows the same shape: when it happens, what changes, and by how much.

animate-{gesture}:{property}-{value}

hover:

whileHover

tap:

whileTap

focus:

whileFocus

inview:

whileInView

drag:

whileDrag

initial:

initial

enter:

animate

exit:

exit

Up and running in 30 seconds

Add the package, configure your framework, and start writing animation classes.

$npm i motionwind-react

NNext.jsnext.config.js

import withMotionwind from "motionwind/next"
export default withMotionwind(config)

VVitevite.config.ts

import motionwind from "motionwind/vite"
plugins: [motionwind(), react()]

Read the docs