🎯 Key points for quick navigation: 00:12 *✨ The tutorial showcases a cool gradient effect created using CSS animations and SVG filters, with circles moving and blending interactively.* 01:08 *📜 The setup involves a vanilla TypeScript project where JavaScript manages mouse movement, but the majority is CSS.* 03:23 *🎨 Linear gradients and root variables are set up for styling the moving gradient circles by using RGB values for flexibility.* 04:16 *📏 The gradient background is styled to fill the viewport, with positioning that ensures a seamless visual.* 05:34 *🎥 Animations involve circles moving and rotating using keyframes, with different placement and blend modes to enhance the effect.* 09:02 *🖱️ Interactive feature added allows a circle to follow mouse movements, using easing functions for smooth transitions.* 12:06 *🪄 SVG filters are employed to create a "goo" morphing effect when circles come close, adding uniqueness to the visuals.* 13:51 *🖌️ Final result features seemingly random moving circles with text overlay, achieving an engaging and dynamic background effect.* Made with HARPA AI
@@WeCoded Yes, it seems that all browsers use GPU except Firefox that uses CPU for rendering (even with GPU rendering on). I don't really understand how the SVG thing works but i wonder if there is a way to tell firefox to use GPU 🤔
Gente, pra usar no angular é simples: O :root vc recorta e cola no style.css Fora isso, no css não muda nada. No html não muda nada. Agora no TS vai ficar assim: export class TesteComponent implements OnInit { ngOnInit() { const interBubble = document.querySelector('.interactive')!; let curX = 0; let curY = 0; let tgX = 0; let tgY = 0; [...] restante do código sem mudar nada
does animating the background slow anyone elses browser down? i managed to get a cool effect but im worries it will be slow for the end user. e.g. all my hover items are now delayed.
Hey I am getting some problem When I downloaded the source code it's only showing the text Bubbles when I open it in live server no animation nothing is showing then I tried to host it to test it's not showing anything either hey can anyone help me
Hi, I've been trying to fix this in other browsers with no success so far. Only managed to get the blur working, but the custom svg filter doesn't seem to work in safari unfortunately. This seems to be a known issue. The only solution I could think of now is to try replicating this effect in canvas using shaders - which is a totally different story. But at least it'd guarantee the consistency of the effect and would give maximum performance.
@@leejacksondev Hey man, are you able to explain a bit more how you were able to get this to work in safari? I tried placing the svg filter inside g1 g2 g3 etc but this didn't work :(
Amazing UI , you deserve 100K
🎯 Key points for quick navigation:
00:12 *✨ The tutorial showcases a cool gradient effect created using CSS animations and SVG filters, with circles moving and blending interactively.*
01:08 *📜 The setup involves a vanilla TypeScript project where JavaScript manages mouse movement, but the majority is CSS.*
03:23 *🎨 Linear gradients and root variables are set up for styling the moving gradient circles by using RGB values for flexibility.*
04:16 *📏 The gradient background is styled to fill the viewport, with positioning that ensures a seamless visual.*
05:34 *🎥 Animations involve circles moving and rotating using keyframes, with different placement and blend modes to enhance the effect.*
09:02 *🖱️ Interactive feature added allows a circle to follow mouse movements, using easing functions for smooth transitions.*
12:06 *🪄 SVG filters are employed to create a "goo" morphing effect when circles come close, adding uniqueness to the visuals.*
13:51 *🖌️ Final result features seemingly random moving circles with text overlay, achieving an engaging and dynamic background effect.*
Made with HARPA AI
THIS IS AWESOME!!!!
cool to see you here Manu! @manuarora
Thank you so much for this!
It looks super good on chrome. I wish it'd look better on firefox too though
Just used this, amazing mate!
Almost like a lavalamp, nice.
Finally after 6 hr of debugging changed it to angular code
Could you share code?
Lmao 6 hours why!
Send?
I can't get it to work
Could you send me the code man ?
Can you please share the code?
there is a littile problem with edges in firefox browser but it was a super awsome tutorial, thanks for sharing
sick. very well made my friend!
Красавчик, лучший!
Converted to Nextjs code, working awesome, Thanks a heaps for the effort, Please keep sharing great things.
Can you share the code link please
@@aayushsomani4995 I'm literally in the process of making a React component for NextJs as I type this, ill share you the code when i have it done
@@aayushsomani4995 won't let me send the code sandbox link, what's your github?
@@aayushsomani4995 What's your github so i can send link to sandbox
@@NuttyLlamasftw awesome, let me know if any problems...
is jose mourinho speaking?
Loved it thank you!
Can you provide the CSS / HTML code? to use in elementor
Circles and blur wont show how to fix ?
Golden. Thank you!
чётко! супер гуд . показал этим буржуям как градиенты рисовать!
lol
cool work thx you for that)
Will I convert for react or just give up...
This is Awesome!
I don't understand what you did in the beginning
Thank you for this good video ! Is it normal that the svg effect has very low perf on firefox ?
Thank you) hmm, didn't try it on Firefox, tbh. Is performance in other browsers ok?
@@WeCoded Yes, it seems that all browsers use GPU except Firefox that uses CPU for rendering (even with GPU rendering on). I don't really understand how the SVG thing works but i wonder if there is a way to tell firefox to use GPU 🤔
I downloaded source code, but it not work. How can I do!
Gente, pra usar no angular é simples:
O :root vc recorta e cola no style.css
Fora isso, no css não muda nada.
No html não muda nada.
Agora no TS vai ficar assim:
export class TesteComponent implements OnInit {
ngOnInit() {
const interBubble = document.querySelector('.interactive')!;
let curX = 0;
let curY = 0;
let tgX = 0;
let tgY = 0;
[...] restante do código sem mudar nada
Would you explain this in depth? I'm really fascinated with your research
Quick question, I can't get the goo filter to work. I copied your code and even cloned the repo, but it didn't work. What am I doing wrong here?
does animating the background slow anyone elses browser down? i managed to get a cool effect but im worries it will be slow for the end user. e.g. all my hover items are now delayed.
I have used this in a project. How do you recommend supplying this to a developer?
Hey I am getting some problem
When I downloaded the source code it's only showing the text Bubbles when I open it in live server no animation nothing is showing then I tried to host it to test it's not showing anything either hey can anyone help me
same
Wondering if you fixed this? got same problem
@@ConnorGraphics no bro it isn't fixed do you have any idea
О, наш человек)
What happens when theres also other pages, would the meshes move along with the scroll? Please respond!
This is 🔥
Can you do it in Nextjs 13+?
u's a lie
It's super cool on Chrome, but it doesn't look well on Firefox, why ?
Beautiful!
How did you run It?
this has a big problem that makes the gpu work to hard
Any hacks to get this to work in Safari? Looks epic in Chrome but Safari it shows as ovals moving around the screen. Would love some ideas.
Hi, I've been trying to fix this in other browsers with no success so far. Only managed to get the blur working, but the custom svg filter doesn't seem to work in safari unfortunately. This seems to be a known issue.
The only solution I could think of now is to try replicating this effect in canvas using shaders - which is a totally different story. But at least it'd guarantee the consistency of the effect and would give maximum performance.
@@WeCoded fixed it. Just apply to g1 , g2 etc as they don’t inherit.
-webkit-filter: url(#goo) blur(40px)
@@leejacksondev , I believe this only fixes the blur filter. The goo effect still doesn't work for me
@@WeCoded
@leejacksondev
Hey, to fix the bubble shapes, set the circle-size variable dependent from your device width,
```
--circle-size: 80vw;
```
@@leejacksondev Hey man, are you able to explain a bit more how you were able to get this to work in safari? I tried placing the svg filter inside g1 g2 g3 etc but this didn't work :(
legend!
how can i implement this on my elementor website?
got a new subscriber
Does this increase CLS (Cumulative Layout Shift) for the core web vital performance ...?
No, it shouldn't.
@@arpiliad7739 You are correct, I also checked it
how to implement on elementor on wordpress?
Nice 😀
it doesn't work, and it is impossible to install this on windows
i love you bro
oh yeah, this is the stuff
can you publish the source code?
Nice! The explanation goes a bit quick however and it's difficult to follow what code gets pasted. Very nice tho!
Slav brother?
как это вставить в elementor?
anyone get this to webflow?
Thanks brah
great!
safari doest work
Which font-family?
fonts.google.com/specimen/Dongle
@@WeCoded thanks
not working
como aplicar isso no elementor?
I want copy code
Source code is here finally :) Check description
thnx
не работает
No source code 😅... thanks btw
I should've published it, true 😅 maybe I will, just need some extra time
Added the source code :)
@@WeCoded you are an angel ... thanks million
лол наш што ли ?
Кнш😊
@@oldiBerezko_ акцент жесть ))))) ті давно в єтой сфере ? мог бы мой сайт покретиковать можнт посоветовать в общем взглянуть +
мненние ?