I built an AI agent skill that clones interactive WebGL sites pixel-for-pixel

Utkarsh Bhatnagar — Mon, 09 Nov 2026 15:16:19 +0000

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 loading 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!

DEV Community: Utkarsh Bhatnagar

I built an AI agent skill that clones interactive WebGL sites pixel-for-pixel