Hey Product Hunt 👋 I build things to figure out how they work, and shoot@site started as a set of questions I wanted real answers to: Can you run a full WebGL scene from inside a content script, on any webpage, without breaking the page? Once that canvas is live, how do you get it to genuinely interact with the DOM underneath — not just float on top of it? If a user "shoots" a DOM element, how do you make it actually disappear from the page and explode into 3D pieces at the same time, so the seam is invisible? The last one was the fun rabbit hole. The trick I landed on is duplicating the target DOM node into a Three.js surface — snapshotting it to a texture, Delaunay-fracturing that texture into physics shards, hiding the original, and handing control to the GL scene at the exact same frame. Done right, your eye can't tell which version you were looking at a moment ago. It's the same problem upcoming browser APIs like "HTML in canvas" are going to make trivial — but today you have to stitch it together yourself, and that stitching taught me a lot about where the DOM and GPU actually meet. A few other constraints I wanted to respect: activeTab only. No "read and change all your data on every website." The overlay can't run on a page until you click the icon, hit Alt+Shift+S, or pick "Shoot this page" from the right-click menu. Zero remote code. Models, HDRIs, sounds, and fonts all ship inside the zip. Must survive strict CSP. Hacker News and YouTube took a week by themselves. Would love to hear which site you demolish first, and what other DOM ↔ GL experiments you'd want to see next. - Shaf

Shoot@Site

Blast any website to pieces with realistic 3D guns

Blast any website to pieces with realistic 3D guns