Background Changer
Background Changer is a lightweight UI component that changes your site's background color as visitors scroll through your content. Place it once on your page and configure your colors inside the Scroll Variant effect. Each section gets its own atmosphere, while your content stays exactly where it should be.
Simply place Background Changer as a fixed component on your page and set it to 100vh. It sits behind all your content, so there is no need to color or style your sections individually. Open the Scroll Variant effect, select the section and the color you want, and the component takes care of the rest.
Your palette can be as large as you want. Add as many colors as you need, then use the Scroll Variant effect to assign each one to a specific section, telling Background Changer exactly when to change and what color to shift to. The result is a smooth, cinematic atmosphere that moves with your content.
Background color changes triggered by vertical scroll
Fixed 100vh placement keeps Background Changer always in the background
Supports unlimited color stops across any number of sections
Works with Framer's native Scroll Variant effect
No need to style or color individual sections manually
Eduardo Casarini
