Move your mouse over the card — a liquid glass refraction shader warps the live HTML content. Click through the distortion to interact.
click the buttons through the glass — the HTML is live
1. HTML card lives inside a
<canvas layoutsubtree> — fully styled with CSS
2. drawElementImage() captures the styled DOM into a 2D canvas
3. The 2D canvas becomes a WebGL texture fed to a fragment shader
4. A refraction shader applies liquid glass distortion following the mouse in real-time
Pointer events pass through the glass to the live HTML underneath. This is impossible without HTML-in-Canvas.