Equalizer Scrollbar

Customise it for any website by Andrew Norman

Show Preview
Equalizer Scrollbar

About Equalizer Scrollbar

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.