Background Changer

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.

Effortless Setup

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.

Unlimited Color Freedom

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.

Key Benefits

• 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