JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Curtainsjs

    curtains.js is a lightweight vanilla WebGL javascript library that turns HTML elements into interactive textured planes.
    Filed under  › 

    • 🔾32%Overall
    • 456
    • 5.5 days
    • 🕩19
    • 👥4

    What is it ?

    Shaders are the next front-end web developpment big thing, with the ability to create very powerful 3D interactions and animations. A lot of very good javascript libraries already handle WebGL but with most of them it's kind of a headache to position your meshes relative to the DOM elements of your web page.

    curtains.js was created with just that issue in mind. It is a small vanilla WebGL javascript library that converts HTML elements containing images and videos into 3D WebGL textured planes, allowing you to animate them via shaders.
    You can define each plane size and position via CSS, which makes it super easy to add WebGL responsive planes all over your pages.

    Knowledge and technical requirements

    It is easy to use but you will of course have to possess good basics of HTML, CSS and javascript.

    If you've never heard about shaders, you may want to learn a bit more about them on The Book of Shaders for example. You will have to understand what are the vertex and fragment shaders, the use of uniforms as well as the GLSL syntax basics.

    Installation

    In a browser:
    
    <script src="curtains.min.js"></script>
    
        
    Using npm:
    
    npm i curtainsjs
    
        
    Load ES module:
    
    import {Curtains} from 'curtainsjs';
    
        

    Documentation

    Getting started
    API docs

    Examples

    Show All