A website animation featuring an image distortion in a curved, using the sin function, React, React Three Fiber and Framer Motion

Source Code / Live demo:
https://blog.olivierlarose.com/tutori...

0:00 Intro
0:27 Project overview
0:55 Creating a basic 3D plane
3:38 Moving the plane on mouse move
10:32 Adding an easing on mouse move
14:49 Adding a basic shader
16:29 Adding an image as a texture
19:16 Curving the plane
27:40 Fixing the size of the plane
29:54 Switching the image on hover
35:22 Fade out on mouse leave
39:05 Outro

More animations: https://blog.olivierlarose.com/
Follow me on Twitter:   / olivierlarose_  
Discord Channel:   / discord  

Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion #threejs