Mirrorframe clones web pages into React, verified by pixel diff

Mirrorframe is an open-source tool that turns a live web page into a self-contained React app. A Playwright-driven headless browser walks the DOM, recording each node's computed styles along with motion and interaction signals, then distills this into a 'Design Genome'—design tokens, motion DNA, and recovered interaction state machines. From that genome it deterministically generates React components and CSS, rewiring the recovered state machines as real event listeners and animations.

Crucially, the entire pipeline runs without any LLM, relying instead on established web technologies like WAAPI, MutationObserver, esbuild, and pixelmatch. The rebuilt page is re-rendered at the same viewport and verified per node and per interaction state via pixel diff, with automatic correction for drift. Even pointer-driven effects—parallax layers, 3D tilt cards, magnetic hover offsets—are modeled mathematically by sampling a 3x3 pointer grid and then replayed and diffed with real mouse movements.

The project also handles time-varying content like video, canvas, and iframes honestly: their mechanisms are reproduced but excluded from pixel comparisons and explicitly flagged rather than silently glossed over. Every skipped element carries a fixed reason code and keeps a placeholder to preserve layout. For engineers, this offers a transparent, reproducible, and auditable approach to UI cloning, design-system extraction, or regression-testing automation—its 0.x version signals an evolving API, not unreliable results.