Among the most sought-after and complicated effects are liquid simulations. To do it right, it takes power – from both code and processors. Luckily, those items are no longer in short supply.
Thus, we’ve found a number of examples of liquid effects that are out of this world. Some look eerily realistic, while others are more reminiscent of a sci-fi fantasy. Let’s take a look:
The Blob Comes Alive by Liam Egan
This rippling, liquid mass is mesmerizing to look at. But when you find out that it’s also interactive, it becomes even more impressive. The blob rotates along with your cursor, giving this WebGL-powered snippet the appearance of being a sphere that’s floating out in space.
Sorry, I Prefer a Shiny Blob by Tibixx
Staying with the spherical theme, this example demonstrates a more well-formed liquid. And, even though we don’t see things like this floating around (well, not on Earth, anyway) the shiny texture and blue color project a realistic look. The checkered pattern within the liquid also helps here, as it gives off a swimming-pool vibe.
Wiggly, Jiggly Button by Waark
A Drop in the Button by Ryan Labar
There is a lot of talk about microinteractions these days. Those little details can do wonders for the user experience. Take this humble radio button. When clicking it, you get more than just a plain old dot in the middle. In this instance, the button uses a neat animation to make it look as though a drop of liquid has filled in your choice. It’s simple, quick and effective.
Liquid Loader by Penno
Juice Me Up by Arturo Morán
Inspired by an Android charging animation, this snippet offers gentle waves and a generous helping of bubbles. Using the slider, you can raise or lower the fill level. Toggle switches let you change the color and the type of bubbles you want to see.
Morphing Liquid Rainbow Experience by Johan Karlsson
Pour Out Some Amazing Effects
It used to be that even attempting a liquid simulation was a questionable choice. The effects weren’t all that great and most users didn’t have enough horsepower to view them, anyway. That’s all changed in recent years.
You no longer need to rely on resource-hogging browser plugins to create something realistic. In fact, the solutions we have at our disposal are cross-browser and relatively lightweight. That gives you the freedom to experiment and let those liquid effects spill into your projects.