From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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 😉
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
We hope you enjoy this set and find it useful!
Awesome, awesome job Louis. I’d very much like to know where did you learn Three.js to make such stunning visuals. I’m willing to spend month just so I could get near this.
+1
+1
Hey !
Glad you liked it 🙂
I started learning ThreeJs a few years ago with very basic shapes (cubes, spheres) and tweaking them a bit.
First by playing with the lights, the colors, the textures.
Then I checked how those shapes are made and played with their vertices to make them morph / move / …
I often start with some basic idea in my mind (what if I took a cube that morphed into a sphere) then I crawl the web for examples, tutorials, help on Stackoverflow,…
When you see nice WebGL ideas, check the source code ! It’s quite easy to access it compared to other programming language 🙂
You can also join related Slack online (Animation At work’Slack for example)
++ Louis
Love the subtle effects.
Beautiful, thanks for these effects
The problem with WebGl backgrounds, it requires too much ressources on low profiles computers. I’ve used this method to create a simple glitch background effect on a previous website and the time to render the scene it takes sometimes a lot of time to display in the same time as other html elements(whenever there’s shades or others elements like tweens). So i’m wondering if it is not better to integrate the html elements directly to the canvas scene instead of putting them outside the canvas. This way it the browser will have to render everything in the same time instead of the html elements plus the canvas (and even create at loader if elements are heavy).
Great work as always. Looking forward to much more.
I am curious if it is possible to change colours on the first example of the data sphere
These are soooo cooooL!….. How do you use these in a website?
Hi, i have a problem using demo 2 offline, something does not work. no animation is showing up. anybody knowing what the problem is?
What should I do to increase the speed of rotating in first demo1?
Awesome, very awesome!
I have question, you can make a triangle instead of a sphere?
Beautiful!!! Thanks 🙂