{"repo":"felixturner/html-in-canvas-cracks","free":true,"listed":false,"github":"https://github.com/felixturner/html-in-canvas-cracks","clone":"git clone https://github.com/felixturner/html-in-canvas-cracks.git","description":"Real HTML rendered through a WebGPU + TSL pipeline — DOM as a texture source with live post-processing.","language":"JavaScript","stars":58,"topics":["canvas","html-in-canvas","shaders","threejs","tsl","webgpu"],"license":null,"category":"networking-infra","readme_excerpt":"html-in-canvas-cracks Real HTML, real layout, real scrolling — rendered through a WebGPU pipeline with TSL shaders, feedback trails, and a live 3D code tunnel in the background. Click the page to crack it; click again to shatter chunks off into the tunnel. A small experiment in treating the DOM as a texture source rather than the final display surface. [!WARNING] Requires desktop Chrome 141+ with chrome://flags/#canvas-draw-element enabled. Live Demo → How It Works Modern browsers can paint a live, laid-out DOM element straight onto a 2D canvas via the new [ CanvasRenderingContext2D.drawElement() ][draw-element] API. Once the page is a canvas, it's a texture. Once it's a texture, every trick WebGPU knows is on the table. This project wires that pipeline up end-to-end: 1. A full-page \"GitHub\" layout lives in the regular DOM so selection, hover, scroll, and font metrics all behave like a real webpage. 2. A hidden clone of that DOM is painted each frame into a 2D canvas that tracks the document's height (not just the viewport). 3. A three.js WebGPURenderer pulls that canvas as a CanvasTexture and composites it through a multi-pass node-material pipeline. 4. Clicks fracture the page into 3D shards that sample the same live texture — cracks propagate, chunks tilt and fall off into the tunnel behind. 5. The page you see is the 3D composite — the DOM underneath is hidden, but still receives clicks, keyboard input, and text selection. [draw-element]: https://github.com/WICG/html-in-c","default_branch":null,"files":null,"tree":[],"storefront":"/r/felixturner","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/felixturner/html-in-canvas-cracks/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}