🎯 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
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 :(
@@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.
Amazing UI , you deserve 100K
Almost like a lavalamp, nice.
Just used this, amazing mate!
🎯 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
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?
Thank you so much for this!
It looks super good on chrome. I wish it'd look better on firefox too though
sick. very well made my friend!
there is a littile problem with edges in firefox browser but it was a super awsome tutorial, thanks for sharing
THIS IS AWESOME!!!!
cool to see you here Manu! @manuarora
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...
чётко! супер гуд . показал этим буржуям как градиенты рисовать!
lol
Красавчик, лучший!
Loved it thank you!
Circles and blur wont show how to fix ?
is jose mourinho speaking?
Can you provide the CSS / HTML code? to use in elementor
Golden. Thank you!
О, наш человек)
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
Will I convert for react or just give up...
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 :(
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 🤔
oh yeah, this is the stuff
I have used this in a project. How do you recommend supplying this to a developer?
got a new subscriber
cool work thx you for that)
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
What happens when theres also other pages, would the meshes move along with the scroll? Please respond!
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.
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 this increase CLS (Cumulative Layout Shift) for the core web vital performance ...?
No, it shouldn't.
@@arpiliad7739 You are correct, I also checked it
I downloaded source code, but it not work. How can I do!
legend!
Beautiful!
How did you run It?
how can i implement this on my elementor website?
I don't understand what you did in the beginning
This is 🔥
Can you do it in Nextjs 13+?
u's a lie
Nice 😀
i love you bro
This is Awesome!
thnx
how to implement on elementor on wordpress?
It's super cool on Chrome, but it doesn't look well on Firefox, why ?
Nice! The explanation goes a bit quick however and it's difficult to follow what code gets pasted. Very nice tho!
it doesn't work, and it is impossible to install this on windows
great!
как это вставить в elementor?
Which font-family?
fonts.google.com/specimen/Dongle
@@WeCoded thanks
this has a big problem that makes the gpu work to hard
Thanks brah
Slav brother?
can you publish the source code?
anyone get this to webflow?
I want copy code
Source code is here finally :) Check description
safari doest work
como aplicar isso no elementor?
I came here for the name of that font😂
not working
не работает
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_ акцент жесть ))))) ті давно в єтой сфере ? мог бы мой сайт покретиковать можнт посоветовать в общем взглянуть +
мненние ?