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.