Accessible-by-default WebGL effects for native HTML elements. The element keeps its state, its keyboard and its place in the accessibility tree; WebGL only paints the surface.
Each row is a native <details>. Press Enter or Space on a title: the cover recedes like ink soaking into paper, and the content moves from transparent and blurred to sharp.
The attribute open changes the instant you press; only the surface is animated.
State, events, focus, Esc, the top layer, light dismiss and the accessibility tree. Nothing is reimplemented: the library wraps the native calls and lets the browser do the work.
One canvas, one WebGL context, shared by every element on the page. It is aria-hidden, takes no pointer events and exists only while an animation runs.
Opacity and blur come from CSS, which follows the same progress as the shader through --p.
With prefers-reduced-motion, without WebGL2 or after a lost context, every element behaves exactly like the native one.
A native popover
Esc or a click outside closes it, natively. The button closes it with the animation.