Interactions Library
USER INTERFACE
MICROEXPERIMENTS.
THE PROJECT.
Tools used
React Three Fiber and custom GLSL shaders.
Summary
I wanted to create some little experiments to further my understanding of 3D on the web and how to create custom shaders.
JELLY SLIDER
This one is an infinite slider that uses the calculated scroll position to smoothly interpolate the horizontal position of the slides. It also uses a custom GLSL shader to create a jelly-like effect on the edges of the slide based on the scroll velocity.
The infinite effect is created by calculating the width of the group of the image planes and then using that combined with the current slide's X position to determine when to move the that slide to the end of the group using the modulus operator (%).
I used GSAP and SplitText to create the hover effects and title text animations.
SCROLL SHADER
This was one of the first custom fragment shaders I built, with the assistance of Drei's ShaderMaterial.
The current scroll position is calculated and used to interpolate between the two provided image textures based on the noise texture used.