Curtains Shader with react

Question

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/

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.

You might want to use spector.js to inspect WebGL scenes and shaders: 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
– Martin Laxenaire, Commented Feb 16, 2022 at 13:24

Diemas Michiels · Accepted Answer · 2022-02-22 00:44:44Z

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 :)

answered Feb 22, 2022 at 0:44

Diemas Michiels

365 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Curtains Shader with react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related