Pixel Disintegration

Click the card to disintegrate it into thousands of particles sampled from the rendered pixels. Click again to reassemble. A Thanos snap for HTML.

Mika Torres

@mika_builds

Just discovered you can render full HTML + CSS directly into a canvas and then explode the pixels into particles. The future of the web is absolutely wild. #HTMLInCanvas

html-in-canvas preview
247
1.2k
4.8k
Share
Intact — click to disintegrate

click to snap — click again to reassemble

1. A tweet card lives inside a <canvas layoutsubtree> — fully styled with CSS

2. drawElementImage() renders the live HTML into the canvas bitmap

3. getImageData() reads every pixel's color and position to seed particles

4. Particles explode outward with velocity, gravity, and drag — then reassemble on demand

This effect requires pixel-level access to rendered HTML — impossible without HTML-in-Canvas.