curtains.js

What is it ?

Shaders are the new front-end web development 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, videos and canvases 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.

You can also add post processing effects to your scene to spice up the whole thing.

Be sure to check the documentation and examples to see what's possible.

Download

curtains.umd.js v8.1 (346Ko) - curtains.umd.min.js v8.1 (122Ko) - Github.

Examples

All the examples are fully commented: do not hesitate to have a look at the source code.

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

Using npm:

npm i curtainsjs

Load ES modules:

import {Curtains, Plane} from 'curtainsjs';

See the documentation for a complete list of all classes availables.

In a browser, you can use the UMD files located in the 'dist' directory:

                                            // "canvas" is the ID of our HTML container element
                                        
const curtains = newCurtains({container: "canvas"
});

const plane = new Plane(curtains, document.getElementById("my-plane"));

Usage with React & Vue

Note that if you are using React or Vue, you might want to try react-curtains or vue-curtains, curtains.js official React and Vue packages.

About

This library is released under the MIT license which means it is free to use for personnal and commercial projects.

All images used in the examples were taken by Marion Bornaz during the Mirage Festival.

All examples video footages were shot by Analogue Production.

Many thanks to webglfundamentals.org tutorials which helped me a lot.

Author of this library is Martin Laxenaire, a french creative front-end developper based in Lyon.
Found a bug ? Have questions ? Do not hesitate to email me, fill an issue on Github or send me a tweet : @martinlaxenaire.