First of all, this is exactly a copy of what Vincent De Feo has made. But I have always wanted to make a UI interaction like this, where the pattern changes with move of the mouse pointer. I understand that this requires calculating the distance between each position and the pointer, but I don't know how to implement it specifically. I'm happy to say that now I know one of the implementations: P5.js. P5.js is a JavaScript library for creative coding. But it uses vanilla JavaScript, and making it to work with React.js as well as Next.js is a new problem.
If you want to use components in React.js, you can use react-p5-wrapper. What I referred to before was react-p5, however I scrolled down so desperately that I didn't notice that react-p5 has been deprecated not long ago...
If you use Next.js, you will encounter this error: window is not defined. This is because we need to dynamically load our component on the client side in order to obtain the window.
Next, I encountered the problem of making the canvas adaptive to the size of the parent component. I obtained the parent node using id, and used the windowResized() and resizeCanvas() methods of p5 to finally implement the responsive design of the canvas.
Finally I started playing with the parameters. I changed the size of the 'effect range' by adding an addedDistance to the calculated distance between the dot and the pointer, I 'faked' the dot's true distance from the pointer thus affected its render behavior. At the same time, I also learned how to use p5.noise()(you can see that the dots in the pattern are disturbed, which looks very cool!)
All in all, I spent most of the day on this UI practice, just transplanted Vicent's code though, but I benefited a lot from this.