Parallax Glass

Apple’s Liquid Glass made me want to try that material in web navigation, buttons, and panels: a little thickness, a background that bends at the edges, and highlights that respond to interaction.

I built Parallax Glass and turned the exploration into reusable web components. I worked on the visual direction, interactions, how the components are used, and checking them in the browser, with AI helping write and revise the implementation.

Getting the material to feel right

I started with the relationship between the glass edge and the background. Blur, transparency, and a border can make a translucent panel, but the bend at the edge gives the material a sense of thickness.

I studied existing open-source implementations and adjusted refraction, highlights, and color. The references are linked below, with implementation credits also kept in the source.

A single still image was not enough to judge the result. An effect that suited a small button could feel too heavy on a large panel. Text and high-contrast backgrounds also revealed distortions that were easy to miss elsewhere. I compared these situations in the browser to decide which details to keep and which to tone down.

Turning the material into usable components

The effect also needed to fit an interface. Navigation, buttons, and larger panels each call for a different treatment. Starting with a long list of settings every time would make the components difficult to use.

I organized common treatments into presets named for their purpose, alongside different thickness options. Someone can start with the navigation or panel material and then adjust it for their page. Light and dark materials can be chosen independently to suit the background beneath them.

The result is six installable items: the base glass, an icon pill, a magnetic pointer, and interactive navigation, capsule, and menu components. The demo includes controls for adjusting and comparing the effects.

Checking the glass in motion

At one point, the code checks passed but the glass edges still pulled the background in the wrong direction. It was not always obvious in a still image. Moving text across an edge and scrolling the page made it much easier to see.

After investigating, I changed how the refraction was processed and recorded the working approach, including the parts that should not be casually simplified. That gave later changes a reference for checking whether the same artifacts had returned.

Browser support required another decision. In the environments tested for this project, Chromium could show live background refraction, while Safari and Firefox used blur, tint, and highlights as a fallback. I tried approaches that made refraction appear to work elsewhere, but they stretched the page text itself during scrolling, so I left them out. The demo and documentation explain which effect the browser supports.

Leaving room for the rest of the page

The demo stacks several glass panels. They looked fine at rest, but moving them together added enough rendering work to affect smoothness.

I reduced the calculation detail for larger panels, compared the resulting images, and removed processing for lighting effects that were switched off. The aim was to keep the edge treatment while making dragging and page movement feel smooth. Wide, shallow components such as navigation bars needed separate consideration so a blanket limit would not remove useful detail.

Making it available for other projects

I open-sourced the components and made them installable through the shadcn Registry. Users get source code they can change to fit their own pages, including the styling and behavior.

The components can be installed individually. Someone who needs the base glass does not have to bring in the full set of interactions. Installation instructions and implementation details live on the project site and in the source repository.

This project took an observation about a material through to something interactive and reusable. AI helped me try approaches quickly. My ongoing work was to check them on real pages: whether the effect suited the interface, whether interaction stayed smooth, and whether another person could use the result.

Live demo & customizer · Source on GitHub

References

• ybouane — Liquid Glass shader
• Iñigo Quilez — 2D distance functions
• Aave — Building Glass for the Web