How does header animation work on a JetBrains site?

Question

JavaScript

Hello!
There is a desire to learn how to do something similar to this (You can see how it works here ):

Where to dig? Perhaps there are already ready-made solutions / plugins where you can see how it works?
Thanks in advance!

Answer 1

It seems that such things are called drop-shaped objects or metaballs (metaball). They have a strict mathematical description. In general, this is the most difficult part in this task. And the rest is just drawing on canvas in a couple of layers. It feels like each “ball” is tied to some point, from which it cannot move more than the distance allotted to it. Well, in addition to this, it "runs away" from the cursor. That's the whole effect.
Here is an implementation example:
https://ru.wikipedia.org/wiki/Metaball
paperjs.org/examples/meta-balls

Answer 2

https://css-tricks.com/gooey-effect/
Maybe this will help?