Hello! Any idea how I could go about making something like this:

[Clearly Vinay]

https://qodeinteractive.com/magazine/wp-content/uploads/2020/10/Bounds.mp4

The way the menu moves like its the inside of a circular shape as you move the mouse to be specific. 

[ZachSaucier]

Hey Vinay. This effect is almost definitely done using WebGL. To create this sort of effect you should probably 

1. Render the text via <canvas>.
2. Use that canvas as a texture in WebGL.
3. Create a warping effect in your fragment shader at the edges.
4. Pass in the mouse position to your shaders (making sure it lines up correctly).
5. Apply a displacement effect in your fragment shader that lessens over time to create the interaction effect.

GSAP can help with the animation part  

[Clearly Vinay]

Oh I see - I'm not famiilar with WebGL so I was quite stumped haha XD

 

Thank you , you have been very useful  I will try making a codepen and sharing it here so if someone stumbles upon it , it would be of help.