Demo 22 May 2026
sirius - live DOM warped inside a canvas
- TypeScript
- Vite
- WebGL
- HTML-in-Canvas
Showcase of the experimental HTML-in-Canvas API: real DOM drawn into WebGL and bent by shaders across six scenes, with a static fallback. TypeScript + WebGL.
The challenge
Show what the experimental HTML-in-Canvas API can do - real, interactive DOM bent by shaders - without breaking browsers that don't yet support the flag.
Approach
Live DOM is drawn into a WebGL canvas via texElementImage2D and distorted by shaders across six scenes. Capability detection swaps in a static-texture fallback that runs the same shaders, so the effects degrade gracefully instead of failing.
Result
Six effects - glass refraction, liquid ripple, holographic foil, a 3D room, particle dissolve and a 2D transform - with a graceful fallback path. TypeScript, Vite, WebGL.