Equalizer Scrollbar: Premium UI Component by Andrew Norman

🎵 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.