How do i add planes with shaders to webpages seamlessly?

Questions
, , ,
1

So i am trying to recreate this website:

more importantly the Horizontal scroll with images and the pixel distortion.

After bit of surfing i found how to implement horizontal scroll using gsap and the pixel distortion using shader, but how do i integrate both of them together?
Integrating the 3d meshes, making it responsive with design and screens.

I tried to use p5js for the effect, since i though it’d be complex to track the positions of the planes in 3d and match it with css, but turned out doing it in p5js was a bit tricky so i am hoping i could find some help here.

2

So after some thinking i thought i could create a react component of threejs class with the plane with texture and the required shader code, but wouldn’t that be bit intense, as for 5 of those objects there’ll be 5 scenes, cameras, rednerer and 5 imports of three.

Is there a better approach for this case?