Everything behavioral: Enter and Space on the summary, the open attribute and the expanded state announced by screen readers.
The canvas is aria-hidden, ignores the pointer and only exists during the animation.
details
Native <details> elements. The content appears with a WebGL dissolve and the height animates in sync; open, keyboard and the accessibility tree stay native.
What stays native?
What does the shader do?
A fragment shader covers the content with the surface color and dissolves it with fractal noise, top to bottom, with a glowing edge along the front.
Standard uniforms: uTime, uProgress, uResolution, uPointer.
What if WebGL is missing?
The click is not intercepted and the browser opens and closes the details as usual. Same with prefers-reduced-motion: reduce and with a lost WebGL context.
Exclusive accordion
Three details with the same name: opening one closes the others. The one the browser closes collapses smoothly instead of jumping.
First question
Only one of these three can be open at a time; the browser enforces it.
A second paragraph, so the collapse has some height to travel.
Second question
Opening this one closed the previous one at once, natively; only its height is animated.
Third question
Keyboard, find-in-page and the toggle event behave as without the library.