Current generation web designers use animations, graphics, and interactive elements to not only raise the quality of a website’s aesthetics but also earn users’ interest and keep them engaged.
Shaders and WebGL are becoming increasingly popular with award-winning designers. One of these designers had an idea, what if you made an entire website inside of WebGL. You could have total control over the look and feel of your website with the ability to custom program animations and effects. This is no small task though and would frustrate most programmers, but not Martin Laxenaire.
What is Curtians.js?
Curtains.js is Martin’s solution to wanting a simpler way to make WebGL sites. With this issue in mind, Curtains.js is a small javascript library that converts HTML elements containing into 3D WebGL objects. Specifically, you can turn any text, photo, or video into a plane object. Then you can animate the 3D position and color of the objects using shaders. You also have the ability to add post-processing effects to your site.
Martin’s own portfolio website is a great example of how much of a difference this can make. The site only contains some text and a few images, but scrolling animation and mouse effects make this site incredibly immersive. https://www.martin-laxenaire.fr/
When should you use it?
Curtains.js does wonders if you use it correctly. Curtina.js is great when you want to spice up a web page’s content by adding a few animations to text and images, or you can let it completely take over your website to make an entirely unique experience.
It does not support 3D models though. So if you are wanting to animate and work with 3D objects, then you are better off using a library like THREE.js.
Getting started
If I piqued your interest in trying out Curtians.js yourself, I recommend starting with Curtiains.js Gettings Started guide [https://www.curtainsjs.com/get-started.html]. If you learn the basics and are wanting something more advanced, Martin has another guide on Medium [https://martinlaxenaire.medium.com/portfolio-2021-technical-case-study-rendering-a-whole-html-website-in-webgl-1cd2982c2050] that explains how he designed his website.
If you haven’t worked with shaders or GLSL before, I recommend reading through The Book of Shaders [https://thebookofshaders.com/]. It is a great blog that will explain the fundamentals of how they work. Finally, if you want to see some more examples of Curtians.js check out their showcase! [https://www.curtainsjs.com/index.html#showcase]