Over the past week, I set out to clone an Awwwards-level scrollyte
lling 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:
The Silent WebGL Texture Stall: Modern sites use responsive tags with .avif, .webp, and -m mobile variants. If even one variant 404s, image promises reject, leaving canvases stuck at opacity: 0.
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.
Runway Collisions: Sticky plates driven by scroll timelines stay pinned and visually collide with downstream content without runtime IntersectionObserver guards.
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!