Performance

Built-in behaviour

• Pointer and scroll effects bypass React state (motion values, refs and CSS custom properties).
• Continuous animations pause when off-screen (IntersectionObserver) and when the tab is hidden.
• Canvas components cap the device-pixel ratio at 2 and resize with ResizeObserver.
• 3D and particle effects use CSS 3D transforms and Canvas 2D instead of a WebGL runtime.

Keeping pages fast

Load heavy, below-the-fold components lazily so their code is only fetched when needed:

import dynamic from "next/dynamic";

const ParticleSphere = dynamic(() =>
  import("@/components/ui/particle-sphere").then((m) => m.ParticleSphere),
);

Wancraft's own catalogue does this for every preview and only mounts demos as they approach the viewport.

A sensible budget

One continuous background effect per viewport is plenty. Combine an ambient background with static content, not with three other ambient effects.