easy WebGL tool to animate images and videos
What is it ?
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.
All the examples are fully commented: do not hesitate to have a look at the source code.
Vertex coordinates helper
Plane properties and transformations cheat sheet
Slideshow with a displacement shader
Multiple planes scroll effect : rotation, scale and parallax
Asynchronous textures loading
AJAX navigation with plane removal
Simple video plane
Multiple video textures with a displacement shader
Simple canvas plane
Text planes using canvas
Post processing displacement effect
Post processing multiple passes
Post processing scrolling wheel with custom transform origin
Advanced render targets usage
Ping pong shading / FBOs swapping flowmap example
Selective shader passes using render targets
GSAP click to fullscreen gallery
Knowledge and technical requirements
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.
Load ES modules:
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:
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.
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 : @webdesign_ml.
Here you'll find websites that use curtains.js with their own custom shaders. You can also check all the Awwwards' submitted websites using it.