Martin Laxenaire had built curtains.js to solve one of WebGL's most annoying problems: getting a shader plane to sit exactly where a <div> lives in the DOM without doing miserable coordinate math. gpu-curtains is what happens when you rebuild that idea from scratch on WebGPU and decide, while you're at it, to make a full 3D engine. Lights, shadows, glTF loading, raycasting, deferred rendering, compute shaders, render bundles, instancing. It's all here. But the original trick remains: point it at your DOM elements and they become shader-driven geometry that scrolls and resizes like it never left the document flow. Images, videos, canvases, all automatically textured with CSS-style transforms. The landing page demo of 2,000 instanced meshes updated via compute shader and post-processed onto a separate canvas is the kind of quiet flex that tells you the architecture underneath is solid.

What makes gpu-curtains interesting technically is the layering. The DOM synchronization classes sit outside the core, so if you don't need them, you're just using a clean WebGPU engine with a sensible high-level API. Martin's design trusts you to write your own shaders rather than hiding WGSL behind some abstraction layer. Textures handle cover behavior through their own matrices. Uniforms update through straightforward render hooks. It's opinionated in the right places and permissive everywhere else. If you're not on WebGPU yet, the original curtains.js still does the DOM-to-WebGL mapping beautifully and remains a great option. We wrote about it here.

Browse the examples page to see everything from basic DOM-mapped planes to deferred rendering setups. The API docs are thorough if you want to dig into the class hierarchy. If you ever spent time wrangling planes into CSS layouts, this is the library you wished existed then, rebuilt for the API you'll be using next.