npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-curtains

v1.0.10

Published

react-curtains is an attempt at converting curtains.js WebGL classes into reusable React components.

Downloads

205

Readme

react-curtains is an attempt at converting curtains.js WebGL classes into reusable React components.

Version Twitter

Getting started

Installation

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-curtains

Components

react-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.

Hooks

Inside your <Curtains /> component, you'll have access to a couple useful custom React hooks:

useCurtains
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
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();
});

Examples

Explore

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

Basic example

This is the port of curtains.js documentation basic example:

index.css
/* 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;
}
index.js
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')
);