Initial commit

2026-06-29 15:11:48 -07:00
commit 66dfdcc58d
404 changed files with 45970 additions and 0 deletions
@@ -0,0 +1,70 @@
+# Clone review — before / after
+
+Side-by-side captures for the deterministic website cloner. Each image is one
+site: **SOURCE (left) vs CLONE (right)**, with a desktop row (1280px, shown at
+50%) on top and a mobile row (375px, 100%) below.
+
+## Results
+
+| Tier | Gates 0–6 | Avg score | Detail |
+|------|:---------:|:---------:|--------|
+| **easy** (24 personal/portfolio/content sites) | **24 / 24** | 99.7 | [easy/RESULTS.md](easy/RESULTS.md) |
+| **medium** (23 SaaS / ecommerce marketing pages) | **16 / 23** | 98.9 | [medium/RESULTS.md](medium/RESULTS.md) |
+| **hard** (32 dense editorial / docs / marketing / ecommerce) | **23 / 32** | 98.8 | [hard/RESULTS.md](hard/RESULTS.md) |
+| **stage2** (25 popup / video / animation pages) | **22 / 25** | 99.1 | [stage2/RESULTS.md](stage2/RESULTS.md) |
+| **sites** (5 multi-page sites, Stage 3) | **47 / 49 routes** | — | [sites/RESULTS.md](sites/RESULTS.md) |
+
+**Stage 2** ("capture the right state") adds two gates beyond 0–6 — **pollution**
+(degenerate / bot-wall / un-dismissed-modal capture) and **perceptual** (tier-
+thresholded screenshot diff) — plus capture-time **overlay/popup dismissal**,
+**animation settling**, and **dynamic-media first-frame**, and a single-load+resize
+capture that keeps content identical across viewports. **19/25 also clear the
+stricter stage-2 bar** (gates 0–6 + pollution + perceptual); browse [`stage2/`](stage2/).
+
+**Stage 3** ("multi-page / whole-site") clones a whole site from one entry URL into
+**one** Next.js app: it crawls routes, collapses CMS collections to one representative
+(jamstack 552→11, 11ty 1085→12 reproduced routes), hoists shared header/footer chrome
+into the layout, rewrites internal links to the clone routes, and adds site-level
+**link-integrity** + **site-determinism** gates. **47/49 routes pass gates 0–6, all 5
+sites green on links + determinism**; browse [`sites/`](sites/).
+
+Gates 0–6 = build, capture, asset/font, DOM, computed-style, layout, determinism.
+Every non-passing medium site still scores 95–99; the misses are documented
+limitations (see below). Screenshots are a human sanity check on top of the
+quantitative gates — browse them in [`easy/`](easy/) and [`medium/`](medium/).
+
+## A few highlights
+
+Pixel-perfect static reconstruction:
+
+![michaelcole](easy/easy-001-michaelcole.me.png)
+
+High-fidelity medium reconstruction:
+
+![medium sample](medium/medium-002-origami.chat.png)
+
+## Known limitations (visible in some medium shots)
+
+A static, deterministic clone reconstructs the captured **static** state. Content
+driven by JS / time / scroll, or embedded from a third party, is **non-
+deterministic frame-to-frame** and cannot be reproduced — the static scaffolding
+(text, layout, materialized images) around it is still correct:
+
+- **Rotating hero text** — shopify, notion (a JS timer swaps the word).
+- **Scroll-scrubbed / autoplay hero video** — mercury (`<video>` frame depends on
+  scroll position; the fallback image is reconstructed, behind the video).
+- **`<iframe>` embeds** — loom (dropped to keep the clone self-contained).
+- **Fancy multi-line headings** (per-word `inline-block` + spacers) stack a few px
+  taller — linear, notion, deel.
+
+Current architecture overview: [`../README.md`](../README.md).
+
+## Generated app shape
+
+The compiler emits a Next.js App Router + TypeScript project per site:
+`src/app/page.tsx` (JSX reconstructed from the DOM), `src/app/ditto.css`
+(clone-specific CSS that cannot be represented cleanly as utilities), and
+`layout.tsx`. Larger clones additionally carry `public/assets/` (materialized
+images/fonts/icons/manifests), generated documentation, and optional
+`src/app/ditto/` runtime helpers. Regenerate any site with
+`cd ../compiler && npm run bench -- --tier=medium`.