Brawl Archery - Rive Animation

A responsive Rive animation project featuring the "Brawl Archery" animation that works perfectly on all devices.

🎯 Features

• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Mobile-First: Maximizes height coverage on mobile screens
• Artboard Optimized: Designed for 700x956 artboard dimensions
• No Build Tools: Pure HTML, CSS, and JavaScript
• GitHub Pages Ready: Deploy directly without any build process

🚀 Live Demo

Visit: [Your GitHub Pages URL]

📱 Responsive Breakpoints

• Desktop (>768px): Balanced width/height scaling
• Tablet (≤768px): 90% viewport width, auto height
• Mobile (≤480px): 95% viewport width, auto height
• Height Optimization: Stretches to fill available screen height on mobile

🛠️ Technologies Used

• Rive: For interactive animations
• HTML5 Canvas: For rendering
• Vanilla JavaScript: No frameworks or libraries
• CSS3: Responsive design with media queries

📁 Project Structure

├── index.html          # Main HTML file
├── index.js            # JavaScript logic
├── rive.min.js         # Rive library (local)
├── brawl_archery.riv   # Animation file
└── README.md           # This file

🚀 Deployment

GitHub Pages

1. Push to GitHub:

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/yourusername/your-repo-name.git
   git push -u origin main

2. Enable GitHub Pages:

   • Go to repository Settings
   • Scroll to "Pages" section
   • Select "Deploy from a branch"
   • Choose main branch and / (root) folder
   • Click "Save"

3. Your site will be live at: https://yourusername.github.io/your-repo-name/

🎨 Customization

Artboard Dimensions

The project is optimized for 700x956 artboard dimensions. To change:

1. Update artboardWidth and artboardHeight in index.js
2. Adjust CSS media queries if needed

Animation File

Replace brawl_archery.riv with your own Rive animation file and update the source in index.js.

📱 Mobile Optimization

• Height Maximization: Animation takes up maximum available height
• Aspect Ratio Preservation: Maintains original proportions
• Touch Friendly: Optimized for mobile interactions
• Orientation Support: Works in both portrait and landscape

🔧 Local Development

Since this is a static project, you can run it locally with any HTTP server:

# Python 3
python3 -m http.server 8000

# Node.js
npx http-server -p 8000

# PHP
php -S localhost:8000

Then open http://localhost:8000 in your browser.

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

Feel free to submit issues and enhancement requests!

---

Note: This project uses the Rive library for animations. Make sure you comply with Rive's licensing terms for your specific use case.