Backed by

Motion as utility classes.

Write animation intent in className. Motionwind compiles it into Motion props before your app ships.

motionwind / compileready

className

<button className="animate-hover:scale-102 animate-tap:scale-95 animate-spring animate-stiffness-420 animate-damping-24 rounded-lg bg-accent px-5 py-3 text-sm font-semibold text-accent-fg cursor-pointer">
  Ship interaction
</button>

compile stepMotion props

generated output

<motion.button
  data-motionwind-motion=""
  className="rounded-lg bg-accent px-5 py-3 text-sm font-semibold text-accent-fg cursor-pointer"
  whileHover={{ scale: 1.02 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 420, damping: 24 }}
>  Ship interaction
</motion.button>

live resultreact

hovertapspringbuild

The examples are the API.

Nine focused previews, each showing one motion pattern you can author beside the element.

Button press

Dialog entrance

Quick actionsesc

Search commands

Open playground

Read the docs

Loading orbit

Menu pop

Accordion reveal

Motion output

Utility classes compile into Motion props.

Tab indicator

Toast entrance

Classes copiednow

Motion props are ready to paste.

SVG line loader

Card hover

Motionwindready

Motion that stays out of the way until it matters.

hover to explore

Start building

Up and running in 30 seconds

Add the package, wrap your framework config, and start writing motion classes.

Read the guide

Install

package manager

$

Next.jsnext.config.js

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

Reactmotionwind.config.ts

import motionwind from "motionwind/react"
export default motionwind()

Vuevite.config.ts

import motionwind from "motionwind/vue"
plugins: [motionwind()]

JavaScriptmotionwind.config.js

import motionwind from "motionwind"
motionwind()