Improved frosted glass header bar effect on landing page

[markteekman]

What version of starlight are you using?

1.0.0

What is your idea?

I really love the frosted glass effect on the header when you scroll down while on the landing page 🙂 I've recently added a similar effect to one of my Astro projects based on an article of Joshua W. Comea where he deep dives into a realistic frosted glass effect: https://www.joshwcomeau.com/css/backdrop-filter/.

The idea here is that, realistically speaking, you should see background elements blurring into the frosted glass before the frosted glass overlays them. Most effects though only start when the frosted glass bar intersects with an element. This small tweak makes it look even more fancy.

I took the liberty to test out these changes locally and here are the results:

Before:

After:

Before:

After:

You can see it most clearly in the example with the star and hero text. The screenshot I took is at the exact same position. The first example shows it even more because of the announcement bar.

Why is this feature necessary?

It's clearly not necessary, it's purely a visual enhancement.

Do you have examples of this feature in other projects?

Still a WIP but I've implemented it here: https://sunnysoaps.netlify.app/

Participation

• I am willing to submit a pull request for this feature.

[delucis]

We explored this in #2687 but ended up deciding against changing for various reasons. Thanks again @markteekman!