Introducing Glass

Introducing Glass, a light-bending material for Framer.

Glass is a playground for creating unique web-native effects by mixing background, mask, filter and backdrop-filter in novel ways.

When I first built the Motion One website, I made a header that mixed a background blur with a patterned overlay for a novel semi-transparency effect.

The pattern changes as content passes underneath, essentially enabling emergent designs and giving the site its own aesthetic.

I've made small experiments since, mixing backdrop-filter, mask and background:

With Glass, I wanted something that would allow me to quickly iterate effects like these. The Framer canvas is the perfect place for that. Code components allow you to define a GUI for your code.

Glass offers simple controls for:

• Blur

• Saturation

• Color overlay

• Multiple masks patterns

• Multiple overlay patterns

• Optic effects

All of these can be mixed and matched, either as a transparent element that alters content beneath, or as a filter applied directly to another piece of content.

Optic Effects

While I've been meaning to make something like this for a while, the real instigator was getting nerd-sniped by the fluted glass effect in this tweet.

I started playing around with an approach that combined four elements each with different backdrop blur and a mask but I wasn't happy with the output and I felt limited by having blur, which dulls colors, my only path towards diffraction.

So I started looking into the world of SVG filters, which can be applied to any element using filter, and in Chrome backdrop-filter.

Via the feDisplacementMap element we can physically shift pixels around. After a couple of quick experiments I was impressed and excited that this could be a great source of optical effects that I could turn from alchemy to pharmacy.

To be clear, for this first version there are no optic effects that use displacement maps like this. But, there are two that are already fun: Color Filter and Chromatic Aberration.

Color Filter uses the feColorMatrix element to filter out colors via individual RGB channels, just like a real camera filter or flash gel.

Unlike mix-blend-mode: screen, a SVG filter like this can be used both via filter and backdrop-filter. This keeps the code fungible and reduces the number of weird interactions with other CSS styles that mix-blend-mode can be prone to.

Chromatic Aberration uses three of these Color Filters to split the image into each R G and B channels, offsets the R and B channels, and then recombines to create the final effect.

My plan is to build up these more basic but fun effects before tackling more complicated distortion effects as I understand more about SVG filters.

Learn more about Glass