0

I try to recreate this effect with curtains-react but I can not find a shader that corresponds, and at the same time make the uniforms work ... If someone can give a lead, an article or an example with curtains-react, it would be of great help to me!

https://www.haritos.co/

enter image description here

It's a infinity draggable slider and when you click on a image, you access to the project, is the raison why I use curtains-react.

DELORME Joris
  • 97
  • 1
  • 7
  • You might want to use spector.js to inspect WebGL scenes and shaders: https://spector.babylonjs.com/ Here the planes are deformed in the vertex shader like this: `vec3 position = aVertexPosition;` `float x = sin((position.y * 0.5 - 0.5) * PI) * uDirection;` `position.x -= x;` There's an additional RGB shift effect in the fragment shader based on the same `uDirection` uniform but that's basically it. – Martin Laxenaire Feb 16 '22 at 13:24

1 Answers1

0

I also wanted to use curtains-js in my project. While browsing I found this codepen which is kind of what you need although the click-through is not implemented.

https://codepen.io/AlainBarrios/pen/bXdzmR

It uses curtains-js instead of curtains-react but I think it should be easly convertable. Put the onRender function in the useCurtainsEvent and add event listeners for the draggable events.

useCurtainsEvent("onRender", (curtains) => {})

I would first make a draggable list in react and then add each event of the example one by one. Just remember that animations like these take a lof of time and will to get right :)

Diemas Michiels
  • 36
  • 5