An HTML Form Made of Cloth

What this is

The same html-in-canvas trick taken to its silly extreme. A live HTML form, rendered as a texture, projected onto a piece of cloth in a real-time physics scene. The cloth flexes, drapes and folds; the form keeps working underneath. Click on the deforming surface and the form still receives the right input.

The puzzle that started it

The DOOM experiment proved html-in-canvas works on a static surface. The computer experiment proved it works on a moving rigid surface. The next question: does it work on a continuously-deforming non-planar surface? Cloth simulation is the worst-case geometry. If the pipeline survives that, it survives anything.

How I built it

Standard cloth simulation in Three.js. The form is rendered to a texture, projected onto the cloth mesh as the cloth deforms. Pointer events at screen-space (x, y) get inverse-projected through the camera, intersected with the cloth's current geometry, and resolved to a position on the original form. The form does not know about any of this; it just receives clicks and keypresses like a normal form.

What this is an example of

A stress test for the input pipeline. If pointer events still resolve correctly through a non-planar, dynamically-deforming surface, then any product-shaped use case is trivial by comparison. Configurators on curved surfaces, packaging mockups, immersive marketing scenes: all easier than this.

If your product has an unusual surface, the pipeline this proves out is ready to apply.