AnimateX

AnimateX is a lightweight UI animation library built with Framer Motion and Tailwind CSS, designed for Next.js projects. Instead of installing via npm, AnimateX provides ready-to-use components you can copy and paste directly into your project.

✨ Features

🚀 Prebuilt motion-powered components with Framer Motion

🎨 Styled with Tailwind CSS

⚡ Plug-and-play: Copy components into your components/ folder

💡 Beginner-friendly and customizable

🔧 Installation & Setup

Since AnimateX is copy-and-paste based, just ensure your project has the following dependencies:

npm install framer-motion tailwindcss

pnpm add framer-motion tailwindcss

Tailwind Setup (if not already installed)

Follow the Tailwind CSS Next.js guide .

🚀 Usage

Copy any component from the components/ folder in AnimateX into your own components/ directory.

Import and use it in your Next.js app:

import AnimateButton from "@/components/AnimateButton";

export default function Home() { return (

📦 Example Components

AnimateButton → Button with hover/tap animations

AnimateCard → Animated card with smooth entrance effects

AnimateModal → Modal with fade/scale transitions

🤝 Contribution

Contributions are welcome! You can fork the repo, add new animated components, and open a pull request.

📄 License

MIT License – Free to use and modify.