whatisgithub

What is mirrorframe?

byte271/mirrorframe — explained in plain English

Analysis updated 2026-05-18

3JavaScriptAudience · developerComplexity · 4/5Setup · moderate

In one sentence

A tool that clones a live website into a working React app by recording its design, animations, and interactions, then verifies the copy pixel by pixel against the original.

Mindmap

mindmap
  root((Mirrorframe))
    What it does
      Clones live webpages
      Rebuilds as React
      Pixel verification
    Tech stack
      Playwright
      React
      esbuild
    Use cases
      Recreate owned sites
      Recover animations
      Migration checking
    Pipeline
      Capture
      Genome
      Reconstruct
      Converge

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Recreate a live website you own as an editable React codebase.

USE CASE 2

Recover animations and interactive behavior like tabs, accordions, and modals from an existing page.

USE CASE 3

Check how closely a rebuilt or migrated page matches the original, pixel by pixel.

USE CASE 4

Feed a design genome of tokens and motion into an AI agent as a Claude Skill.

What is it built with?

JavaScriptNode.jsReactPlaywrightesbuild

How does it compare?

byte271/mirrorframeabhagsain/bayut-maps-ratingsabhishek-kumar09/who-is-imposter
Stars333
LanguageJavaScriptJavaScriptJavaScript
Last pushed2021-04-12
MaintenanceDormant
Setup difficultymoderatemoderateeasy
Complexity4/52/53/5
Audiencedevelopergeneralgeneral

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires Node.js 18 or later, installing downloads a Playwright Chromium browser binary.

So what is it?

Mirrorframe takes a live website and turns it into a working copy built with React, then checks its own work by comparing pixels between the original and the copy. It uses a headless browser, meaning a browser running in the background with no visible window, to visit a page and record everything about it: colors, spacing, fonts, animations, and how the page responds to clicks, hovering, and scrolling. No AI model is involved in the rebuilding step, so every part of the output can be inspected and reproduced. The process runs in four stages. First it captures the page, recording the style of every element and downloading images, fonts, and other assets. Second, it organizes what it captured into what the project calls a design genome, which groups together colors and spacing patterns along with any animations and interactive behavior it noticed. Third, it rebuilds the page as a self contained React app, wiring the recovered animations and interactions back in as real code. Fourth, it renders the rebuilt version and compares it, element by element and interaction by interaction, against the original, automatically fixing small differences where it can. The project pays close attention to motion: it can recover CSS animations, hover effects, mouse tracking effects like tilting cards, scroll triggered reveals, and even animations driven by custom code rather than standard browser features. It also tries to recover interactive patterns like accordions, tabs, and modal popups by testing the page directly rather than guessing. For verification, every part of the rebuilt page gets its own pass or fail status, and the project reports honestly when something could not be recovered instead of pretending it succeeded. To use it, you need Node.js 18 or later, then you clone the repository, install dependencies, and run a script pointing at a URL you own or have permission to copy. The project is also packaged as a Claude Skill for AI agents to use directly. As of this writing it is still an early, 0.x release, meaning its command line options and output formats may still change.

Copy-paste prompts

Prompt 1
Walk me through cloning a page I own with mirrorframe using the run command.
Prompt 2
Explain what a design genome is and what it captures from a webpage.
Prompt 3
Show me how to use the --breakpoints flag to capture a page at multiple screen widths.
Prompt 4
Help me interpret the pass, corrected, and failed statuses in a mirrorframe verification report.

Frequently asked questions

What is mirrorframe?

A tool that clones a live website into a working React app by recording its design, animations, and interactions, then verifies the copy pixel by pixel against the original.

What language is mirrorframe written in?

Mainly JavaScript. The stack also includes JavaScript, Node.js, React.

How hard is mirrorframe to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is mirrorframe for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.