motionwind

Convert Tailwind-like animate-* classNames into Motion props at build time.

Updated Mar 27, 2026

Search Tags:#react #animation #tailwind #jsx #motionwind #babel-plugin

Ready to run

npx skills add https://github.com/jangtrinh/EaseUI-Agent --skill motionwind

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motionwind
Source: https://github.com/jangtrinh/EaseUI-Agent/tree/main/.claude/skills/motionwind
Command: npx skills add https://github.com/jangtrinh/EaseUI-Agent --skill motionwind

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

MotionWind provides a build-time Babel plugin that converts Tailwind-like animate-* classNames into Motion component props, eliminating boilerplate and runtime overhead.

Core Features & Use Cases

Scans JSX for static className strings with animate-* tokens and parses them into Motion props.
Rewrites <div> to <motion.div> with the corresponding props and auto-injects the necessary imports.
Works with Next.js and Vite setups, enabling zero-runtime transforms and seamless integration.
Enforces static classNames and lowercase HTML elements for reliable transforms.

Quick Start

Install motionwind and replace your animate-* classNames with static, Tailwind-like tokens in JSX to enable build-time transformation.

Frequently Asked Questions about motionwind

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert Tailwind animate-* classNames into Motion props?▼

You can convert Tailwind animate-* classNames into Motion props by applying a build-time Babel plugin that parses static className strings and rewrites standard HTML elements into motion components with corresponding props automatically.

Does MotionWind work with Next.js and Vite?▼

Yes, the build-time Babel plugin supports both Next.js and Vite setups, automatically transforming static JSX classNames into Motion props for zero runtime overhead and seamless integration.

How does build-time animation transform reduce runtime overhead?▼

Build-time animation transforms parse static animate-* tokens during compilation, rewriting standard JSX elements into motion components and injecting necessary imports directly, bypassing the need for runtime class parsing.

What are the limitations of converting animate-* classes at build time?▼

Build-time conversion enforces static className strings and strictly lowercase HTML elements to ensure reliable transforms, meaning dynamic classes, conflicting props, or non-standard tags will not be processed.

Do I need to manually import motion components for Tailwind animations?▼

Manual imports are unnecessary because the Babel plugin automatically injects use client declarations and motion imports when it rewrites standard JSX elements into motion components.