Easy and Handy CSS npm that delivers micro interactions with just adding classes.
npm install micro-interactions-css*
``🎯 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.
---
`bash
npm install micro-interactions-css
`
`
import 'micro-interactions-css/dist/micro-interactions.css';
`
#### 🔗 UNPKG
`
`
#### 🔗 jsDelivr
`
`
#### Pin to a specific version
`
`
*
🚀 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.
`
I Spin Forever
✨ Shiny Text ✨
`
> 💡 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
----------
`
Loading...
`
*
🧪 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!
``
---