react-curtains is an attempt at converting curtains.js WebGL classes into reusable React components.
Of course you'll need to create a React app first. Then, just add react-curtains into your project by installing the npm package:
npm install react-curtainsreact-curtains introduces a bunch of components based on curtains.js classes:
In order for it to work, you'll need to wrap your App into the Curtains component. You'll be then able to use the other components to add WebGL objects to your scene.
Inside your <Curtains /> component, you'll have access to a couple useful custom React hooks:
useCurtains(callback, dependencies);This hook is called once the curtains WebGL context has been created and each time one of the dependencies changed after that. Note that you'll have access to the curtains object in your callback.
As with a traditional React hook, you can return a function to perform a cleanup.
useCurtains((curtains) => {
// get curtains bounding box for example...
const curtainsBBox = curtains.getBoundingRect();
});useCurtainsEvent(event, callback, dependencies);This hook lets you subscribe to any of your curtains instance events, so you can use those events from any component in your app.
useCurtainsEvent("onScroll", (curtains) => {
// get the scroll values...
const scrollValues = curtains.getScrollValues();
});Here are codesandboxes ports of some of the official documentation examples:
- Basic plane
- Vertex coordinates helper
- Simple plane
- Simple video plane
- Slideshow using GSAP
- Multiple planes
- Multiple planes with post processing
- Selective render targets
- Flowmap
This is the port of curtains.js documentation basic example:
/* curtains canvas container */
.curtains-canvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
/* basic plane */
.BasicPlane {
width: 100vw;
height: 100vh;
}
.BasicPlane img {
display: none;
}import ReactDOM from 'react-dom';
import React from 'react';
import {Curtains, Plane} from 'react-curtains';
import './index.css';
const basicVs = `
precision mediump float;
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat4 uTextureMatrix0;
varying vec3 vVertexPosition;
varying vec2 vTextureCoord;
void main() {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
// varyings
vVertexPosition = aVertexPosition;
vTextureCoord = (uTextureMatrix0 * vec4(aTextureCoord, 0.0, 1.0)).xy;
}
`;
const basicFs = `
precision mediump float;
varying vec3 vVertexPosition;
varying vec2 vTextureCoord;
uniform sampler2D uSampler0;
uniform float uTime;
void main() {
vec2 textureCoord = vTextureCoord;
// displace our pixels along the X axis based on our time uniform
// textures coords are ranging from 0.0 to 1.0 on both axis
textureCoord.x += sin(textureCoord.y * 25.0) * cos(textureCoord.x * 25.0) * (cos(uTime / 50.0)) / 25.0;
gl_FragColor = texture2D(uSampler0, textureCoord);
}
`;
function BasicPlane({children}) {
const basicUniforms = {
time: {
name: "uTime",
type: "1f",
value: 0
}
};
const onRender = (plane) => {
plane.uniforms.time.value++;
};
return (
<Plane
className="BasicPlane"
// plane init parameters
vertexShader={basicVs}
fragmentShader={basicFs}
uniforms={basicUniforms}
// plane events
onRender={onRender}
>
{children}
</Plane>
)
}
ReactDOM.render(
<Curtains>
<BasicPlane>
<img src="/path/to/my-image.jpg" alt="" />
</BasicPlane>
</Curtains>,
document.getElementById('root')
);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent