Effect plugins

Pick an effect: it is applied to the same live HTML form drawn inside the canvas below, and the form stays usable through it. An effect's actions are buttons under its description (handle.trigger). The effects host, the plugins and the frame cap are extensions of this library, not part of the HTML-in-Canvas proposal; they run over the polyfill and over a browser's own implementation (details). Link to one effect with ?effect=<name>.

Effect off

Real DOM, drawn into a canvas

Touch the interface.

Every field you see is ordinary HTML inside this canvas. The selected effect is a WebGPU plugin applied to the drawn result; the form keeps its layout, focus, typing and scrolling, and clicks are mapped through the effect to the field you see.

  • Click a field where the effect draws it, and type.
  • Submit with an empty name or a broken email: some effects react to the error.
  • Move the frame cap: the effect renders at most that often.

Contact

Nothing is sent anywhere.
mode: starting   effect: starting   cap: -   effect frames/s (page-side count of effectframe events): -   prefers-reduced-motion: -