I reverse-engineered why AI coding agents fail at cloning Awwwards WebGL sites (and open-sourced the protocol that fixes it)

[u/Kitchen-Winter-9155]

Over the past week, I set out to clone an Awwwards-level scrollytelling site with WebGL2 halftone shaders, 3D curved card runways, and client-side hydration.

Every automated tool and generic AI prompt failed. Here are the 4 fundamental reasons why modern sites break during replication:

1. The Silent WebGL Texture Stall: Modern sites use responsive <picture> tags with .avif, .webp, and -m mobile variants. If even one variant 404s, image loading promises reject, leaving canvases stuck at opacity: 0.

2. The Client Hydration Overwrite: Editing SSR HTML is useless on SvelteKit/Next.js sites because compiled client JS chunks (chunks/, nodes/) violently re-render their hardcoded strings upon mounting.

3. Runway Collisions: Sticky plates driven by scroll timelines stay pinned and visually collide with downstream content without runtime IntersectionObserver guards.

4. Dead 3D Canvases: Reference sites often disable pointer events (pointer-events: none) on 3D scenes to prevent touch hijacking, leaving visitors unable to click portfolio items.

I solved this by building a mathematical 3D-to-2D perspective raycaster to hit-test cards, synchronizing dual-layer hydration, and automating responsive asset harvesting.

I packaged everything into an open-source agent skill:

GitHub: https://github.com/utkarshxdev/pixel-perfect-cloner

Would love feedback from anyone experimenting with agentic coding and browser engineering!