Equalizer Scrollbar

equalizer scrollbar that brings life and energy to user navigation.

UpdateMore settings than you know what to do with. now you can make this fit any website. 🎵 Graphic Equalizer Scrollbar Transform your website's scroll experience with a dynamic, audio-inspired equalizer scrollbar that brings life and energy to user navigation. ✨ What It Does This custom scrollbar replaces the default browser scrollbar with an animated graphic equalizer that responds to scroll position. Watch as colorful segments light up progressively as users scroll through your content, creating an engaging visual feedback system that's both functional and mesmerizing. 🎨 Key Features Visual Customization 3 customizable color zones (start, mid, end) with optional dual-color gradients Multiple segment shapes: Rectangle, Square, or Round (circles) Adjustable segment count (10-50), width, and spacing Variable heights for authentic EQ appearance Customizable background, inactive segment, and outline colors Dynamic Effects Pulse animation - Active segments rhythmically pulse like real sound Glow effects with adjustable intensity Ripple animation when scrolling Bounce effect - Segments react elastically like sound hitting them Trail mode - Create a comet effect with customizable trail length Mirror mode - Segments fill from center outward Interaction Click-to-jump - Click any segment to navigate to that scroll position Hover effects with scale and opacity changes Auto-hide when not scrolling with smooth fade transitions Adjustable fade delay timing Normal or inverted fill direction Advanced Options Multiple bars (2-4) side by side for enhanced visual impact Mobile responsive - Auto-hide on mobile devices High contrast accessibility mode Customizable animation speeds Gradient direction control (horizontal/vertical) 🚀 Perfect For Music & audio websites Creative portfolios Modern SaaS applications Entertainment & gaming sites Any project wanting unique, memorable UX 💡 Easy to Use Simply drag the component onto your canvas and customize via Framer's property panel. No coding required - all features are controlled through an intuitive interface with organized sections. 🎯 Performance Lightweight and optimized for smooth 60fps animations. Uses efficient React hooks and CSS transforms for butter-smooth scrolling experiences.

Customise it for any website