A Node.js/Express prototype that fetches and sanitizes arbitrary web pages, then lets you toss their key DOM nodes around with a Matter.js 2D physics simulation.
npm install
npm run devOpen http://localhost:3000 in your browser, paste a URL, and press Fetch. Up to 60 prominent elements (headings, paragraphs, buttons, images) are wrapped in physics bodies you can fling around. Gravity, density, and bounce can be tuned via the sliders.
- Server (
src/server.js): Fetches the requested URL, follows redirects, enforces HTTP(S), strips scripts/iframes, absolutizes asset URLs, and returns sanitized body HTML plus inline styles and stylesheet URLs. - Client (
static/main.js): Requests the server API, injects remote styles in a controlled list, extracts visible nodes, and spawns Matter.js rectangles with live DOM elements attached. A render loop syncs each body's position/rotation back to its element.
⚠️ This is a demo. Malformed or very large pages may still fail, and remote styles/scripts are sanitized only lightly. For production use, add caching, stronger sanitization, and isolation (e.g. render remote content inside a sandboxed iframe or prerender snapshots).