# 🎯 micro-interactions-css

A tiny, fast, and plug-and-play CSS utility library for beautiful micro-interactions like hover effects, spins, scaling, movement, and shine animations --- no JavaScript needed.

---

## 📦 Installation

### Via npm

```bash
npm install micro-interactions-css

Import in React/Vite/Next.js

import 'micro-interactions-css/dist/micro-interactions.css';

Via CDN

🔗 UNPKG

<link rel="stylesheet" href="https://unpkg.com/micro-interactions-css/dist/micro-interactions.css" />

🔗 jsDelivr

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/micro-interactions-css/dist/micro-interactions.css" />

Pin to a specific version

<!-- For version 1.0.0 -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/micro-interactions.css" />

🚀 Features

• 🔄 spin / spin-reverse

• 🔍 scale / scale-down

• ⬅️ ➡️ ⬆️ ⬇️ move-left / move-right / move-top / move-bottom

• ✨ shine (a slick shimmer effect on text or buttons)

• ⚡ One class = One effect

• ⚙️ Lightweight & easy to extend

🔧 Usage

Just add the class to any element, and the animation will kick in.

<button class="move-right micro-interaction">Hover Me</button>

<div class="scale micro-interaction">Scale On Hover</div>

<span class="spin">I Spin Forever</span>

<p class="shine">✨ Shiny Text ✨</p>

💡 Combine with .micro-interaction for smooth transitions.

🧙 Available Classes

| Class | Description | Trigger | | --- | --- | --- | | .move-right | Moves element to the right | :hover | | .move-left | Moves element to the left | :hover | | .move-top | Moves element upward | :hover | | .move-bottom | Moves element downward | :hover | | .scale | Scales element up | :hover | | .scale-down | Scales element down | :hover | | .spin | Infinite spin clockwise | always | | .spin-reverse | Infinite spin counter-clockwise | always | | .shine | Adds shine effect (like shimmer) | :hover | | .micro-interaction | Adds smooth transition to elements | optional |

🎨 Example

<button class="move-top micro-interaction">Move Top</button>
<span class="spin-reverse">Loading...</span>

🧪 Playgrounds

• ✅ Works in all modern browsers

• 🛠️ No JavaScript required

• 💻 Perfect for buttons, links, icons, text, etc.

📁 File Structure

micro-interactions-css/
├── dist/
│   └── micro-interactions.css
├── package.json
└── README.md

📜 License

MIT --- free to use, modify, and share.

💡 Pro Tips

• Use together with TailwindCSS or Bootstrap.

• Add your own custom keyframes or extend the library.

• Respect motion preferences with prefers-reduced-motion for accessibility (coming soon).

👨‍💻 Author

Made with 💙 by [Your Name]

⭐ Star the repo if you find it helpful!

---