DEV Community

Cover image for Create a generative landing page & WebGL powered background animation

Create a generative landing page & WebGL powered background animation

George Francis on February 08, 2021

Recently I took a trip to the faraway land of dribbble and saw something magical. There were fuzzy orbs and beautiful, glass-like interfaces floati...
Collapse
 
grahamthedev profile image
GrahamTheDev

A ❤ from me for including prefers-reduced-motion and considering people with vestibular (movement) disorders!

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

I had a quick fiddle seeing if a similar effect could be made purely with filters and CSS. With a bit of work I think it could be made to look just as good without having to load any JS libraries.

If I get chance I will see if I can make a closer copy of this but if someone wants to have a fiddle with it this is where I got so far.

Collapse
 
georgedoescode profile image
George Francis

Ah! Thank you ❤️

Collapse
 
ben profile image
Ben Halpern

Yeah, this whole post is thorough and brilliant.

Thread Thread
 
georgedoescode profile image
George Francis

Thank you, Ben! 🙌

Collapse
 
eecolor profile image
EECOLOR

I think it's a good idea to let people know that you need to enabled hardware acceleration and experimental WebGL if you are using Chrome:

chrome://settings > Advanced > System > Use hardware acceleration when available
chrome://flags > WebGL Draft Extensions

Collapse
 
georgedoescode profile image
George Francis

I think this should be enabled by default, no?

Collapse
 
eecolor profile image
EECOLOR

On my windows machine it as not. The weird thing however was that when I disabled the experimental setting and relaunched Chrome it was still working.

So maybe mention it for people who do not see the colors.

Thread Thread
 
georgedoescode profile image
George Francis

Oh, that’s very odd. Not something I can replicate. Thanks for the heads up, though! Definitely worth keeping in mind 👌

Collapse
 
olney1 profile image
Ben

Hi @georgedoescode it seems like your codepen is not working correctly showing the colours? codepen.io/georgedoescode/pen/XWNmvro

Collapse
 
groundhogs profile image
Ground Hogs

Is pixi still and 800kb dep?

Collapse
 
georgedoescode profile image
George Francis

Good question! I don't think it's that large. Checking out pixijs.io/customize/, a bundle with everything included (apart from a canvas fallback) comes in around 393kb. I think one could customise their build and end up with a bundle size of < 200kb, though, for sure. It's still quite large for a single animation and in reality, I would likely load PIXI dynamically after the rest of the page had rendered, and I had checked the user's motion preferences.

Collapse
 
groundhogs profile image
Ground Hogs

Great to see pixi advance this much! I see that with all bells and whistles included it's about 400kb, which is acceptable! If only the docs were nicer, I'd prob see myself using it for a lot of things

Collapse
 
olney1 profile image
Ben

This is awesome! What part of the ColorPalette code would I need to tweak to avoid the really bright yellows that come through?

Collapse
 
manelariapala profile image
ManelAriapala

Dear George, thank you for this article with clear concise explanation. I have been trying to figure out if it is possible to map an array of color to the orb array to have a chosen set of colors?