Devesh JoshiCo-founder, product
Nine years building AI platforms serving 12,000+ engineers. LLM platforms, agentic systems (MCP), and multi-model safety evaluation.
Optimizing Next.js App Router for 60fps interactive WebGL canvas graphics
Keeping heavy 3D Three.js shaders, GSAP scroll triggers, and complex layouts performant on mobile devices without degrading Core Web Vitals.
The cost of heavy WebGL graphics on web performance
Interactive 3D canvas backgrounds and smooth scroll choreography elevate brand perception, but unoptimized WebGL contexts can cause severe frame drops and poor Interaction to Next Paint (INP) scores.
Canvas isolation and dynamic import strategies
Isolate heavy WebGL components (`Three.js`, `R3F`) behind Next.js dynamic client components (`ssr: false`). This guarantees that heavy 3D rendering scripts do not block initial Server-Side Rendering (SSR) or main-thread hydration.
Deactivate WebGL render loops when canvas elements scroll out of the viewport using `IntersectionObserver`. Stopping requestAnimationFrame cycles on off-screen elements saves GPU resources on mobile devices.
GSAP ScrollTrigger memory hygiene
When navigating between Next.js App Router routes, unkilled GSAP ScrollTrigger instances leak memory and cause layout jitter. Always invoke `ScrollTrigger.kill()` and clean up event listeners in React cleanup hooks.
Topic Focus & Target Concepts
This is the work behind our build practice — pitch-ready MVPs through to production applications, on a stack chosen for whoever maintains it after we leave.
Product and web app buildsRunning into this in your own stack? Twenty minutes, no deck.
Book the call