Scrolling Portfolio Effect. How would I replicate this in three.js?

Questions
1

Hey everyone.

I’m new to using three.js and hopefully, someone can guide in the right direction. I’m looking to build an effect similar to this website: https://www.kirkwhayman.com/work

The images scroll through with a distortion effect on the image based on the speed of the scroll wheel, with the text animating in the opposite direction, with some kind of mask on it.

Found a similar example here, although it doesn’t lock to the scrollwheel like the first example.

Suggestions, code examples, GitHub, anything is appreciated.

2

wrote a codrops article about this https://tympanus.net/codrops/2019/12/16/scroll-refraction-and-shader-effects-in-three-js-and-react/ the effect is similar but i liked it more subtle. you can ramp up the values though to get something as crazy as that.