micro-interactions-css/README.md

Easy and Handy CSS npm that delivers micro interactions with just adding classes.

* * * * *

```
# 🎯 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/micro-interactions-css@1.0.0/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!

```

---