A lightweight, high-performance SVG bar chart component with smooth animations and rich customization options. Built purely with SVG and Framer Motion - no external charting libraries needed, ensuring optimal performance and minimal impact on your website's load time.

✨ Key Features

• Pure SVG Implementation: Lightweight and performant, no external dependencies
• Smooth Animations: Beautiful entrance animations when scrolling into view
• Interactive Hover Effects: Engaging hover animations with customizable scaling and colors
• Gradient Support: Optional gradient fills for each bar with hover state variations
• Responsive Design: Automatically adapts to any container size while maintaining proportions
• Sequential Animation: Configurable delay between bars for engaging entrance effects

💡 Pro Tips

1. Use gradients to create depth and visual interest - each bar can have its own unique gradient
2. Adjust the "Amount in View" setting to control when the animation triggers while scrolling
3. Fine-tune the delay between bars to create a pleasing sequential animation effect
4. Use complementary colors for hover states to enhance user interaction
5. Adjust bar spacing and radius to match your design language

🎨 Styling Options

• Bars: Colors, hover colors, gradients, spacing, and border radius
• Animations: Entrance timing, delays, easing functions
• Hover Effects: Scale factor and transition timing
• Layout: Flexible spacing and proportions

This component delivers professional-grade data visualization capabilities while maintaining excellent performance. Perfect for statistics, comparisons, or any data-driven section of your website. The pure SVG implementation ensures smooth animations and minimal impact on page load times, making it an ideal choice for performance-conscious projects.