A WebGL hero that doesn't melt mobile

An interactive WebGL hero is a fast way to lose a mobile visitor: a heavy canvas can blow the initial bundle, pin the GPU, and drain the battery before the page even settles. The hero on this site runs a live particle field and still hits 60fps on a mid-range phone. Three techniques get it there.

Lazy-load the canvas

The 3D scene has no business being in the first JavaScript a browser parses. Split it into its own chunk and load it on the client only, after the page is interactive:

const HeroParticleCanvas = dynamic(
  () => import("@/components/HeroParticleCanvas"),
  { ssr: false },
);

The hero's text and layout render server-side and paint immediately; the WebGL chunk streams in behind them. Time-to-interactive stays tied to content, not to the renderer.

Adapt the resolution to the device

A retina phone reports a device pixel ratio of 3, which means rendering nine times the pixels of a 1x display — for a background effect nobody is inspecting that closely. Clamp it. React Three Fiber will even adjust it dynamically as the frame budget moves:

<Canvas dpr={[1, 1.5]} /* clamp, never render at 3x */>
  {/* ...scene */}
</Canvas>

Pair that with a lower particle count on small viewports and the same scene scales from a workstation down to a budget handset without a separate code path.

Gate the render loop on visibility

The most expensive bug in interactive pages is a render loop that keeps running after its canvas scrolls off screen — a full 60fps GPU spin for pixels no one can see. Watch the element with an IntersectionObserver and stop the frame loop when it leaves the viewport:

const io = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) startLoop();
  else stopLoop();
});
io.observe(canvasEl);

Below the fold, the scene costs nothing. Scroll it back into view and it resumes. This single change is often the difference between a warm phone and a hot one.

The result

• Initial bundle stays small — the renderer is never on the critical path.
• One scene scales from desktop to a budget phone via clamped DPR and particle tiers.
• Offscreen frames cost nothing, so battery and thermals stay sane.

Spectacle and performance are not a trade-off. They are a budget — and most of staying inside it is refusing to render what no one is looking at.