Some time ago I saw an example of a website using the webGL library, I was captivated.
I was extremely intersted in learning this new thing and so I started researching it.
I read about GLSL, Three.js and Shaders and now that I have a basic understanding of the concept, It's time to start practicing.
This is a collection of cool ideas and stuff I wanted to try and learn as far as 3D web design goes.
I decided to use the Three.js library and more specificaly the React Three Fiber which is a React renderer for Three.js.
It has a lot of great helpers with the included library of drei and it can save you a lot of boilerplate.
-
Fake 3D effect on mouse move with the use of depth map. Similar to what Facebook is doing.
-
RGB shift on mouse move. When the cursor passes over the image it splits its color channels (Red, Green and Blue) depending the mouse acceleration.
-
Matrix of dots moving in space with a sine wave function.
-
Kinetic Typography example. The animation is just a glsl noise function but the posibilities are endless by just playing around with the values.
-
For the next one I found a cool image transition effect on dribbble that I want to try out.
Check it over here