The instant I laid eyes on Apple’s new vibrancy effect in OS X 10.10 (Yosemite) I was amazed. It is simple, delightful, and adds context and comfort to the user experience without being distracting in most cases. Since then, I’ve felt inspired to emulate it some limited way as a nod to the originators. About a week ago, I made the time to make something.
The result is vibrancy.js, a new jQuery plugin. It simply provides a nice blur filter commonly known as the frosted glass effect. It also boosts the saturation of desaturated colors, just like the real vibrancy effect that inspired it. Someday, I hope to take it up to the next level so that the effect can be applied dynamically to draggable elements, tooltips, modals, and more. However, even in this limited form I believe it raises the bar in several ways.
- A higher quality frosted glass effect than any CSS or SVG blur filter can currently provide. Those produce a feathering of the blur effect around the borders of blurred elements. That said, Charles Skoda’s attempt at perfecting them makes very clever use of negative margins, calc(), and obscuring box-shadow drop shadows to achieve a much higher quality effect than these filters usually obtain.
- Unlike other blur-related plugins, it only attempts to solve a single use case: application of the effect to one or more child elements positioned within a common parent. This restriction has benefits for compatibility, performance, and ease of configuration.
- Brightness, vibrancy (a selective saturation effect), and blur are all configurable as data attributes on the individual child elements.
Experience has taught me that no amount of inspiration is worth entertaining if at the end of a job well done you eventually come to realize that you just unknowingly imitated a superior alternative created by someone else. So, before I began work on this plugin I took a look around to see what has been done by those who came before me. For the sake of documenting the current state of the art in this area, here are the three most similar efforts that Google was willing to reveal.
I discovered a proof-of-concept created by Fabio Sasso. This very talented designer (currently working at Google) was seemingly inspired by iOS 7’s blur effects over a year ago. His work did not include a developer plugin and did not address brightness and saturation. But he did do a very bold and interesting thing; he renders the underlying content using html2canvas.js so that rendered HTML can pass beneath the frosted glass and integrate into the blur. The result has some odd artifacts and doesn’t hold up well to resizing of the browser window but it really is a striking proof of concept.
Another related offering is blur.js by Jacob Kelly. His work provides a jQuery plugin, addresses brightness/darkness via black or white overlays with variable opacity, enables hue tinting via overlays, implements caching in localStorage, and even supports draggable elements. It doesn’t handle browser window resizing well or implement any adjustments to the image saturation; but those are relatively minor issues. The main reason I wasn’t discouraged by the existence of Jacob’s work is that his approach doesn’t attempt to limit usage scenarios. His plugin asks that you invoke it upon an element or set of elements, provide a source element (optional, defaults to the <body> tag) with one of several possible CSS background-position values, and manually configure the X and Y-axis offsets as necessary.
Rodney Leviton published an impressive effort to implement a high-performance dynamic frosted glass effect for a challenging web design project; in Angular! There is no jQuery plugin, and nor is there a Github repo as of this writing. Mr. Leviton has probably gone further than any other person to date in order to reach frosted glass nirvana. His work is compatible with responsive layouts and backgrounds and even handles window resize and scroll events gracefully. Apparently, he was not content to stop there and went on to make use of requestAnimationFrame() and translate3d() to optimize his rendering performance. Running Chrome from Linux I did not see the blur effect updating as the masonry-style layout in his demo rearranged; but there was only minimal stuttering and they did in fact update once they reached their final positions.
In closing, here is a list of the plugin blogs, repositories, and other sites that have managed to discover my plugin so far. I will try to update it once in awhile for science. The only one that I’m really tempted to submit to is unheap.com — so please leave a comment if you know of any other sites of the same caliber!