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.
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.
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)
Music & audio websites
Creative portfolios
Modern SaaS applications
Entertainment & gaming sites
Any project wanting unique, memorable UX
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.
Lightweight and optimized for smooth 60fps animations. Uses efficient React hooks and CSS transforms for butter-smooth scrolling experiences.
Andrew Norman
