🎨 AnimateHub

A comprehensive animation library for modern web development

🌟 About AnimateHub

AnimateHub is a powerful open-source animation UI library designed to simplify the integration of sleek, reusable animations into modern web applications. Tailored for both beginners and experienced developers, it offers a rich collection of customizable, production-ready components. AnimateHub accelerates frontend development by reducing complexity, enhancing user experience, and promoting clean, maintainable code. It’s your go-to toolkit for crafting visually engaging interfaces with minimal effort.

🎯 Our Mission: To democratize web animations by providing high-quality, performant, and accessible animation components that anyone can use, learn from, and contribute to.

� Ready-to-use Components Copy-paste code snippets for animations, transitions, and effects	🎨 Interactive Library Live previews and interactive component showcase	� Responsive Design Works perfectly across all devices and screen sizes
⚡ Performance Optimized Smooth animations with excellent performance	✂️ Copy-Paste Simple Just grab the code and integrate instantly	⚙️ Modern Tech Stack Built with latest React, Vite, and Tailwind CSS

✨ Key Features

🎨 50+ Animation Components: Buttons, cards, loaders, hover effects, forms, navigation, and more
📂 Multiple Categories: Organized by component type for easy navigation and discovery
👀 Live Preview: See animations in action before copying the code
🌙 Dark/Light Mode: Comfortable viewing experience in any lighting environment
📱 Mobile Responsive: Perfect experience across all devices and screen sizes
⚡ Modern Tech Stack: Built with React 18, Vite 5, and Tailwind CSS 3
📋 Copy-Paste Ready: One-click code copying with syntax highlighting
🚀 Performance Optimized: Smooth 60fps animations with minimal impact

🎯 What Makes AnimateHub Special?

🚀
Zero Setup Required
No complex installations or configurations. Just copy, paste, and animate!

🧪
Production Ready
All components are tested, optimized, and ready for real-world applications

😍
Community Driven
Built by developers, for developers. Every contribution makes it better!

🛠️ Tech Stack

Frontend	Styling	Build Tools	Analytics

🚀 Quick Start Guide

Prerequisites

Before you begin, ensure you have the following installed:

�
Node.js (v16.0+)
Download here

�
Package Manager
npm or yarn

�
Git
Download here

⚡ Local Development Setup

Follow these steps to get AnimateHub running on your local machine:

1. 📥 Clone the Repository

git clone https://github.com/Premkolte/AnimateHub.git
cd AnimateHub

2. 📦 Install Dependencies

npm install

3. 🏃‍♂️ Start Development Server

npm run dev

4. 🌐 Open in Browser

The application will be available at: http://localhost:5173

🔧 Available Scripts

Command	Description
`npm run dev`	Start development server with hot reload
`
npm run build`	Build production-ready application
`npm run preview`	Preview production build locally
`npm run lint`	Run ESLint for code quality checks

🤝 Contributing to AnimateHub

We love your input! AnimateHub thrives on community contributions. Whether you're fixing bugs, adding new animation components, improving documentation, or suggesting new features, your contributions are welcome!

🎯 Ways to Contribute

🐛
Bug Reports
Found a bug? Help us squash it!

✨
New Animations
Create stunning new components

�
Documentation
Help others understand better

🎨
UI/UX Design
Enhance user experience

🚀 Getting Started with Contributions

1. 🍴 Fork & Clone

# Fork the repository on GitHub, then clone your fork
git clone https://github.com/your-username/AnimateHub.git
cd AnimateHub

2. 🔄 Set Up Upstream

git remote add upstream https://github.com/Premkolte/AnimateHub.git
git fetch upstream

3. 🌿 Create a Feature Branch

git checkout -b feature/your-feature-name
# or
git checkout -b fix/your-bug-fix

4. 💻 Make Your Changes

Write clean, readable code
Follow our coding conventions
Add comments where necessary
Test your changes thoroughly

5. ✅ Commit Your Changes

git add .
git commit -m "feat: add awesome new animation component"

Commit Message Convention:

feat: for new features
fix: for bug fixes
docs: for documentation changes
style: for code style changes
refactor: for code refactoring
test: for adding tests

6. 📤 Push & Create PR

git push origin feature/your-feature-name

Then create a Pull Request on GitHub with a clear description of your changes.

📋 Contribution Guidelines

For New Animation Components:

Create the component in src/components/SnippetComponents/
Add snippet data in src/components/SnippetComponents/Snippets/
Include live preview functionality
Add proper documentation and comments
Ensure responsiveness across all devices
Test performance for smooth animations

Code Style:

Use ES6+ features
Follow React best practices
Use Tailwind CSS for styling
Keep components modular and reusable
Add PropTypes for type checking

🏷️ Good First Issues

New to open source? Look for issues labeled:

good first issue - Perfect for beginners
help wanted - We need community help
documentation - Improve our docs
bug - Fix existing issues

🔍 Pull Request Process

Check existing PRs to avoid duplicates
Link related issues in your PR description
Add screenshots/GIFs for UI changes
Write descriptive commit messages
Ensure all tests pass
Request review from maintainers

💡 Development Tips

Adding New Animation Categories:

Create component in SnippetComponents/YourComponent.jsx
Add navigation in Dashboard/Buttons.js
Include in dashboard in Dashboard/Window.jsx
Test responsiveness across different screen sizes
Add proper documentation and examples

Best Practices:

🎨 Design First: Sketch your animation concept before coding
⚡ Performance: Use CSS transforms and opacity for smooth animations
📱 Mobile Friendly: Test on various devices and screen sizes
♿ Accessibility: Consider users with motion sensitivity preferences
🧪 Browser Testing: Ensure compatibility across modern browsers

Useful Commands:

npm run dev          # Start development server
npm run build        # Build for production
npm run lint         # Check code quality
npm run lint:fix     # Auto-fix linting issues

📁 Project Structure

🔍 Click to expand project structure

AnimateHub/
├── 📁 public/
│   └── vite.svg
├── 📁 src/
│   ├── 📁 components/
│   │   ├── 📁 About/
│   │   │   └── AboutUs.jsx
│   │   ├── 📁 Auth/
│   │   │   ├── login.jsx
│   │   │   └── SignUp.jsx
│   │   ├── 📁 Contact/
│   │   │   └── ContactUs.jsx
│   │   ├── 📁 Contributors/
│   │   │   └── Contributors.jsx
│   │   ├── 📁 Dashboard/
│   │   │   ├── Buttons.js
│   │   │   ├── Dashboard.jsx
│   │   │   ├── SideBar.jsx
│   │   │   └── Window.jsx
│   │   ├── 📁 Home/
│   │   │   ├── Chatbot.jsx
│   │   │   ├── HomePage.jsx
│   │   │   ├── Navbar.jsx
│   │   │   ├── Testimonial.jsx
│   │   │   └── 📁 images/
│   │   ├── 📁 Payment/
│   │   │   └── Payment.jsx
│   │   ├── 📁 SnippetComponents/
│   │   │   ├── 📁 Snippets/
│   │   │   │   ├── Animation.js
│   │   │   │   ├── Buttons.js
│   │   │   │   ├── Cards.js
│   │   │   │   ├── Checkboxes.js
│   │   │   │   └── ... (40+ more animation snippets)
│   │   │   ├── AnimationSnippets.jsx
│   │   │   ├── ButtonSnippets.jsx
│   │   │   ├── CardSnippets.jsx
│   │   │   ├── CheckboxSnippets.jsx
│   │   │   └── ... (matching components)
│   │   └── 📁 Templates/
│   │       ├── Blog.jsx
│   │       ├── Portfolio.jsx
│   │       ├── Product.jsx
│   │       └── ...
│   ├── 📁 assets/
│   │   └── FAQ.jsx
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── 📄 Configuration Files
│   ├── .gitignore
│   ├── eslint.config.js
│   ├── index.html
│   ├── package.json
│   ├── postcss.config.js
│   ├── tailwind.config.js
│   ├── vercel.json
│   └── vite.config.js
├── 📄 Documentation
│   ├── CODE_OF_CONDUCT.md
│   ├── CONTRIBUTING.md
│   ├── LICENSE
│   └── README.md
└── 📄 Assets
    ├── Favicon.png
    ├── Logo.png
    ├── Prototype.png
    └── Website-Image.png

📋 Code of Conduct

We are committed to fostering a welcoming and inclusive community. Please read our Code of Conduct to understand the standards of behavior we expect from all contributors.

🎯 Open Source Programs

🌟 Proudly participating in GirlScript Summer of Code 2025! 🌟

GirlScript Summer of Code 2025
3-month long Open Source Program
🌐 Official Website

🎓 What is GSSoC'25?

GirlScript Summer of Code is a 3-month long Open Source Program conducted by GirlScript Foundation. It aims to help beginners get started with Open Source Development while encouraging diversity in the tech community.