Hover & click any component or section to see its motionwind code — the code panel slides in from the right

v0.3 — Now in Public Beta

Animations inclass names.

Write Motion animations as Tailwind-like utility classes. Transformed at build time. Zero runtime overhead. No imports needed.

GitHub

App.tsx

// Just add classes. That's it.
<button
  className="
    animate-hover:scale-110
    animate-tap:scale-95
    animate-spring
    rounded-xl bg-white px-6 py-3
  "
>
  Click me
</button>

Interactive Playground

Feel the difference

Every preview below is powered by motionwind classes. Interact to feel them live.

Search Bar Focus

animate-focus:scale-105·animate-focus:y--2·animate-spring·animate-stiffness-300

All Gesture States

Hover me, or tap me

animate-hover:scale-110·animate-tap:scale-90·animate-spring

All 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)

Scroll Reveal (Fade Up)

I appear on scroll

animate-initial:opacity-0·animate-initial:y-20·animate-inview:opacity-100·animate-inview:y-0·animate-once

Drag Interaction

Drag me around

animate-drag-both·animate-drag-elastic-30·animate-drag-snap

Infinite Rotation

animate-enter:rotate-360·animate-repeat-infinite·animate-ease-linear

Spring Physics

Hover for springy bounce

animate-spring·animate-stiffness-200·animate-damping-8·animate-hover:scale-115

How It Works

Build time, not runtime

A Babel plugin reads your classes and emits optimized Motion components. Your users never pay for parsing.

Click to see compiled output

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

Features

Everything you need

Click to see code

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.

Syntax

One pattern, infinite motion

Click to see examples

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

hover:

whileHover

tap:

whileTap

focus:

whileFocus

inview:

whileInView

drag:

whileDrag

initial:

initial

enter:

animate

exit:

exit

Get Started

Up and running in 30 seconds

One command to install. One line to configure. Start animating immediately.

Next.jsnext.config.js

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

Vitevite.config.ts

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

Read the Docs

Button.tsx

// Spring-powered button
<button
  className="
    animate-hover:scale-110
    animate-tap:scale-95
    animate-spring
    rounded-xl bg-white px-6 py-3
  "
>
  Click me
</button>

Compiled at build time — zero runtime cost

ESC to close