TimeBasedBG — Automatically change BG based on time.

Time Based Background is a smart component that dynamically changes your website’s background throughout the day using the visitor’s local time.

Simply upload images for different times of the day, morning, day, evening, and night and the component automatically switches between them as time passes. This creates a living, contextual experience that makes your website feel more immersive and responsive.

The component also includes intelligent fallback logic. If certain time slots don’t have images, it smoothly continues using the previous available image instead of leaving blank spaces. For example, if only morning and night images are uploaded, the morning image will remain active until the night time begins.

You can also customize the start time for each period, giving you full control over when backgrounds change.

Perfect for portfolio hero sections, landing pages, and storytelling websites that want to visually reflect the time of day.

Features

• Automatically detects visitor’s local time

• Supports morning, day, evening, and night backgrounds

• Customizable time ranges for each period

• Smart fallback logic when images are missing

• Full-width responsive background support

• Simple drag-and-drop setup inside Framer