From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
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.
Let’s have a look at the individual demos:
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.
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.
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.
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.
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.
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!