An interactive playground where real, live, semantic HTML is rendered inside a WebGL scene — and blurred by actual depth-aware tilt-shift optics, not a CSS filter. Type into a form that lies flat as the ground of a miniature diorama. Tab between controls at different depths and watch the camera rack focus to the one you are using. Every input, button and select is the real DOM: clickable, typeable, tab-navigable and visible to a screen reader.
Built on the experimental HTML-in-Canvas API (<canvas layoutsubtree>, gl.texElementImage2D, getElementTransform, canvas paint events) and Three.js HTMLTexture. Eighteen scenes cover six focus models — pointer, autofocus, fixed strip, scroll dolly, cinematic and manual — over a physical depth-of-field, a tilted (Scheimpflug) focus plane, or an artistic screen band.
<canvas layoutsubtree>
gl.texElementImage2D
getElementTransform
paint
HTMLTexture
This page needs JavaScript, WebGL2, and Chromium 148 or newer with the HTML-in-Canvas flag enabled — chrome://flags/#canvas-draw-element, or launch with --enable-blink-features=CanvasDrawElement.
chrome://flags/#canvas-draw-element
--enable-blink-features=CanvasDrawElement
By @ybouane.