npm package: @siddsr/anix
Description: Anix is a lightweight, fast, and developer-friendly open-source animation library packed with beautiful, production-ready CSS animations.
Author: Siddharth Singh
Latest version: 1.0.4

# 🎉 AniX – Animation + UX Library

AniX is a modern, lightweight animation library built for developers working with HTML, CSS, JavaScript, React, Angular, and Vue.  
It provides production-ready UI animations — from button hover effects to full-page transitions — all in a clean, dev-friendly format.

---

## 🎯 Goal

Become the go-to animation library for developers who want polished UI without bloated dependencies.

---

## ✨ Features

- 🔥 100+ production-ready animations (entry, exit, loaders, buttons & more)
- ⚡ Lightweight and fast (no runtime bloat)
- 🌐 Works with HTML, React, Angular, and Vue
- 🎛️ Customizable: duration, delay, color, easing, size
- 🧩 Modular: Use only what you need
- 🚀 Simple, class-based usage (no JavaScript required)

---

## 📦 Installation

### Option 1: CDN (Recommended for Quick Use)

`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@siddsr/anix@latest/dist/anix.min.css">`

### Option 2: NPM Install

`npm install @siddsr/anix`
After installing, import the CSS in your project:
`import '@siddsr/anix/dist/anix.min.css';`

## 🛠️ Usage
### 🚀 In HTML
`<div class="ani-fade-in-up">Hello AniX</div>`

## ⚛️ In React

```` ```jsx ````
npm install anix-react

import '@siddsr/anix/dist/anix.min.css';

function App() {
  return <div className="anix-fade-in-left">Welcome to AniX!</div>;
}
```` ``` ````

## 🅰️ In Angular

// In your component template
`<div class="anix-zoom-in">Angular + AniX!</div>`

// Import the CSS in your global styles
`@import "~@siddsr/anix/dist/anix.min.css";`

## 🌱 In Vue
```` ```jsx ````
<template>
  <div class="anix-slide-in-right">Vue.js with AniX</div>
</template>

<script>
import '@siddsr/anix/dist/anix.min.css';
export default { };
</script>
```` ``` ````

## 🎬 Animation Categories

### 🎬 Entry Animations

- anix-fade-in

- anix-slide-in-up, anix-slide-in-down, anix-slide-in-left, anix-slide-in-right

- anix-zoom-in, anix-zoom-in-up, anix-zoom-in-down

- anix-rotate-in

- anix-bounce-in, anix-drop-in

- anix-pop-in, anix-grow-in, anix-stretch-y

### 🚪 Exit Animations

- anix-fade-out

- anix-slide-out-up, anix-slide-out-down, anix-slide-out-left, anix-slide-out-right

- anix-zoom-out

- anix-rotate-out

- anix-flip-out-x, anix-flip-out-y

- anix-bounce-out, anix-drop-out

- anix-shrink-out, anix-contract-out

### 🎨 Button Effects

- slide-bg-left, slide-text-up

- fill-color-left, fill-glow

- morph-pill, 3d-tilt, wobble

- icon-bounce, icon-rotate, icon-grow

### ⚙️ Loader & Spinner Animations

- bounce-dots, typing-dots, wave-dots

- spinner-ring, orbit-loader

- progress-bar-slide, pulse-progress

- typewriter-loader, scrambled-text

- gooey-balls, heartbeat-loader, firefly-loader

### 🧲 Scroll-Based Effects

- fade-in-on-scroll

- zoom-in-on-scroll

- scroll-float-up

- scroll-blur-in

- scroll-tilt

- text-reveal-mask

- text-split-word

## 📜 License

MIT License. Free to use in personal and commercial projects.

## 💼 Business Philosophy

AniX = Animation + UX.
We aim to simplify animations for frontend devs while keeping things lightweight, modern, modular, and blazing fast.

Whether you're building a landing page, dashboard, portfolio, SaaS app, or an e-commerce site, AniX will help your UI stand out — with style.

Want to collaborate, sponsor, or contribute to AniX Pro? Let’s talk: siddharth.sr.dev@gmail.com

## 📢 Important Note

- 📄 Official Documentation is coming soon!
- 📖 For now, consider this README as your rough guide to use AniX easily.

## 🚀 Quick Links

- 🌐 Docs: anix.dev (coming soon)
- 📦 NPM: [npmjs.com/package/anix-core](https://www.npmjs.com/package/@siddsr/anix)
- 🧪 Playground: play.anix.dev (coming soon)
- 🐙 GitHub: [github.com/sidddev15/anix](https://github.com/Sidddev15/Anix)

Made with ❤️ by [Siddharth Singh Rathore]