easy WebGL tool to animate images and videos

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.


In a browser:

<script src="curtains.min.js"></script>

Using npm:

npm i curtainsjs

Load ES module:

import {Curtains} from 'curtainsjs';



Version 1.8

  • Added enableDrawing(), disableDrawing() and needRender() methods to the Curtains object (props to @risq).
  • Improved videos removal.

Version 1.7

  • setScale() method now adjusts the textures sizes as well.
  • Fixed a bug where CSS scale and plane's sizes were not synced.
  • All plane's images, canvases and videos now have a shouldUpdate property set to true by default. When those associated textures are not visible, you could set this property to false to get a performance boost.
  • Added an onError() callback to the Curtains object to handle errors during initialisation and updated all examples.
  • Fixed a bug with video textures (props to @deJong)

Version 1.6

  • Added an updatePosition() method to the Plane object.
  • Added a "production" parameter to the Curtains instanciation process to remove console warnings in production.
  • Improved video handling and removed warnings.

Version 1.5

  • Added a removePlane() method to the Curtains object.
  • Slightly improved video textures performance.

Version 1.4

  • Added support for canvases as textures.
  • Improved pixel ratio handling.

Version 1.3

  • Added the possibility to set/unset depth test for each plane via a enableDepthTest() method. This might be useful to handle transparency problems.
  • Added a plane moveToFront() method so that a plane could overlay all other planes.

Version 1.2

  • Added support for videos as textures.
  • Sort planes by their vertices length in order to avoid redundant buffer binding calls during draw loop.
  • Refactored and cleaned code.

Version 1.1

  • WebGL context viewport size now based on drawingBufferWidth and drawingBufferHeight.
  • Cleaned and refactored code in order to add support for lost and restored context events.

Todo and improvements

  • Tests, tests and more tests.
  • Improve performance if possible.
  • ...


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 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 or send me a tweet : @webdesign_ml.


Here you'll find websites that use curtains.js with their own custom shaders: