← WebGL UI

one renderer, three effects

Two <details> with different effects (dissolve and wipe) and a <dialog> with its backdrop, all sharing one canvas and one WebGL context. The effect is chosen per element.

Dissolve (default effect)

Fractal-noise dissolve from the top down, with a glowing edge on the front.

Wipe (another effect, same renderer)

A left-to-right wipe with a noisy edge. Different fragment shader, same canvas and context.

Backdrop effect

Opened on the same renderer that animates the two details.