About this page
Pick an effect: it is applied to the same live HTML form drawn inside the canvas, and the form stays usable through it. An effect that has a demo action plays it once when you pick it (not when you prefer reduced motion); its actions are the buttons in the panel (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>; &demo=0 opens it without the showcase. Stack runs up to three effects in a chain (&then=<name>,<name>): each reads the picture the one before it rendered, the chain under the chips shows the order, and a click is mapped back through all of them.
Input map (&map=1) shows what the host does with the pointer. An effect moves pixels, so the field you see under the pointer is elsewhere in the page: the host maps the pointer back through the effect (host.mapPoint) and sends it to the element there. The white ring is the pointer, the pink dot the place in the page it is sent to, the pink frame the real element at that place (in its true position, under the canvas), and the label says which element it is and what it holds now.
The readout above the canvas counts the effectframe events of the last second: frames per second, and the interval between frames (median and 95th percentile). At rest an effect that is not continuous by design presents nothing, so it reads 0.
mode: starting
effect: starting
display: measuring
range: -
prefers-reduced-motion: -