A lightweight vanilla WebGL library that turns HTML DOM elements into interactive textured planes.
curtains.js is a lightweight vanilla WebGL JavaScript library that converts HTML DOM elements—like images and videos—into interactive 3D textured planes. It solves the common headache of positioning WebGL meshes relative to DOM elements by letting you define plane size and position via CSS, making it easy to add responsive WebGL animations to web pages.
Frontend developers with solid HTML, CSS, and JavaScript basics who want to integrate shader‑based 3D animations into their sites without wrestling with low‑level WebGL positioning.
Developers choose curtains.js because it seamlessly bridges the DOM and WebGL, allowing CSS‑controlled layout with full shader customization, unlike heavier frameworks that require manual mesh positioning.
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Automatically maps HTML elements to WebGL planes using CSS for layout, as emphasized in the philosophy, making it easy to position 3D content responsively without manual mesh adjustments.
Enables rich visual effects via vertex and fragment shaders, allowing developers to create unique animations, with examples provided in the README for shader-driven distortions.
Planes adapt to layout changes automatically, ensuring WebGL elements scale with CSS-based designs, which is a core feature highlighted in the key points.
Includes ShaderPass and RenderTarget for frame-buffer effects like FXAA antialiasing and ping-pong rendering, extending creative possibilities beyond basic planes.
Requires knowledge of GLSL syntax and shader concepts, as the README explicitly states users must learn from resources like The Book of Shaders, creating a barrier for non-experts.
Primarily converts images and videos into planes, so it lacks support for custom 3D geometries or complex meshes, restricting use cases to surface-level animations.
WebGL rendering can be GPU-intensive, and managing multiple planes or effects may impact performance on low-end devices, a trade-off for the visual richness.