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...
For further actions, you may consider blocking this person and/or reporting abuse
A ❤ from me for including
prefers-reduced-motionand considering people with vestibular (movement) disorders!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.
Ah! Thank you ❤️
Yeah, this whole post is thorough and brilliant.
Thank you, Ben! 🙌
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
I think this should be enabled by default, no?
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.
Oh, that’s very odd. Not something I can replicate. Thanks for the heads up, though! Definitely worth keeping in mind 👌
Hi @georgedoescode it seems like your codepen is not working correctly showing the colours? codepen.io/georgedoescode/pen/XWNmvro
Is pixi still and 800kb dep?
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.
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
This is awesome! What part of the ColorPalette code would I need to tweak to avoid the really bright yellows that come through?
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?