3D components

3D effects draw attention, and they also cost the most: a WebGL context, a render loop and often a large library. This guide covers how to use them so the rest of the page stays fast and accessible.

What is available

The library includes several components that render in 3D or fake depth, for example:

• Globe: a WebGL globe drawn with cobe, a library of about 5 kB.
• Floating 3D Particles: a canvas particle field that pauses off screen and under reduced motion.
• Icon Cloud: icons on a rotating sphere.
• Text 3D Flip and Tilt Card: CSS 3D transforms, no WebGL.

More components built on three.js and React Three Fiber are being added. Those list three and @react-three/fiber (and sometimes @react-three/drei) as dependencies, and the CLI installs them for you. Check the component page for its exact dependencies before you install.

Load it late

3D code is heavy, so keep it out of the first load. In a client component, import it with next/dynamic and turn off server rendering, since WebGL only exists in the browser:

Copy"use client"
 
import dynamic from "next/dynamic"
 
const Globe = dynamic(
  () => import("@/components/ui/globe").then((mod) => mod.Globe),
  {
    ssr: false,
    loading: () => <div className="bg-muted aspect-square rounded-full" />,
  }
)
 
export function HeroGlobe() {
  return <Globe />
}

Outside Next.js, React.lazy with Suspense does the same job. Reserve the component's space with a fixed aspect ratio so nothing shifts when it loads.

Pause when nobody is looking

• Stop the render loop when the element leaves the viewport (IntersectionObserver) and when the tab is hidden (document.visibilityState).
• With React Three Fiber, use frameloop="demand" for scenes that only need to redraw on interaction.
• Cap the device pixel ratio (for example dpr={[1, 2]}) so phones with 3x screens don't render nine times the pixels.

Respect reduced motion

When prefers-reduced-motion is set, render a still frame: stop auto-rotation and drift, and keep direct manipulation such as dragging. See Motion and reduced motion.

Accessibility and fallbacks

• A canvas is invisible to screen readers. If the scene carries meaning, give the canvas role="img" and an aria-label, or describe it in nearby text. If it is decoration, hide it with aria-hidden.
• Never put the only copy of important content or the only way to act inside a 3D scene.
• WebGL can fail (old devices, blocked GPUs, lost contexts). Show a static image or gradient when it does, and keep the layout intact.

Check performance

Test on a mid-range phone, not just your laptop. Watch the frame rate and the main-thread time in your browser's performance panel, and make sure the page's Largest Contentful Paint is the text, not the canvas.