Decorative WebGL Backgrounds

Today we are going to explore some original and experimental backgrounds generated using WebGL. The main idea is to show interesting animated shapes as decorative page backgrounds, some having subtle interactivity. All the demos are made with the Three.js WebGL library to create the various shapes, and the animations are controlled by the performant GSAP animation library.

The demos are kindly sponsored by we.design: Snag the hottest new domain name for designers. If you would like to become a demo sponsor, you can find out more here.

Since those demos are created and animated in real time, you can easily add some user interaction.

Attention: Please be aware that this is very experimental and some demos require a fast machine. You may want to create lighter versions for mobile devices. Note that it’s always wise to add a fallback image in your project.

Let’s have a look at the individual demos:

DecorativeWebGLBackgrounds01

The dots in this demo react to the moving mouse with some bounce animations. Those dots are randomly connected through lines and some of them are slowly moving to create an illusion of a real time data set.

DecorativeWebGLBackgrounds02

This demo is only made with dots slowly morphing from a sphere to a line. The animation is the same for all the dots but with a small delay to create the effect of elasticity.

DecorativeWebGLBackgrounds03

The morphing of this demo is controlled using a Perlin noise algorithm to generate a wobble effect. You can control the power of that effect by moving your mouse from the top to the bottom of the screen.

DecorativeWebGLBackgrounds04

This demo is based on the previous one but instead of a solid shape, it is made with lines along its surface. Those lines are slowly moving from the bottom of the shape to its top.

DecorativeWebGLBackgrounds05

There is a retro game aspect on this demo created with only lines along a cube. The cube is slowly distorted like time and space in some science fiction movies.

DecorativeWebGLBackgrounds06

Some may see a mythical octopus, for others it could be an alien bacteria. In any case we don’t really know what this thing is but we can’t take our eyes off its tentacles 😉

We hope you enjoy this set and find it useful!

References and Credits

Decorative WebGL Backgrounds was written by Louis Hoebregts and published on Codrops.


Next Post


© Wanderlust Web Design - Since 2012 developing custom woocommerce plugins