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

> Source: <https://dev.to/utkarshbhatnagar/i-built-an-ai-agent-skill-that-clones-interactive-webgl-sites-pixel-for-pixel-24l2>
> Published: 2026-11-09 15:16:19+00:00

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](https://github.com/utkarshxdev/pixel-perfect-cloner)

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