Skip to content
don’t make it ugly
All resources

PackageMotion

React Three Fiber

Three.js as React components, with a huge helper ecosystem.

Open sourceFree
Visit website (opens in a new tab)View GitHub (opens in a new tab)Read docs (opens in a new tab)
Preview of React Three Fiber

What it is

React Three Fiber (R3F) lets you build Three.js scenes declaratively as React components. Together with the drei helper library it makes common 3D tasks (cameras, controls, environment lighting, text, loaders) a few lines each. Maintained by Poimandres.

Why it’s here

If you're on React and want 3D, this is the way. The drei helpers are where the productivity is. Look at the examples gallery before you start.

Best for

  • 3D in React apps
  • interactive product scenes
  • hero visuals

Can my agent use this?

Agent excellent agent friendliness

Yes. Docs, public source and npm. Ask your agent to use @react-three/fiber with @react-three/drei helpers, and to lazy-load the canvas.

Excellent: Public docs, public source or an installable package. An agent can read, install and implement this directly.

Access methods

  • Docs
  • GitHub
  • npm

Install

npm install three @react-three/fiber @react-three/drei

Related resources

  • Spline
    Preview of Spline

    Spline

    Design 3D scenes in the browser and drop them into a site as a component.

    Toolgood agent friendliness
  • ShaderGradient
    Preview of ShaderGradient

    ShaderGradient

    Slow-moving 3D gradients for React, Framer and Figma that look like expensive motion design.

    PackageFreeOpen sourceexcellent agent friendliness
  • Aceternity UI
    Preview of Aceternity UI

    Aceternity UI

    Showy, copy-paste React components for landing pages that need a moment.

    Component librarygood agent friendliness
  • Liquid Logo
    Preview of Liquid Logo

    Liquid Logo

    Drop in your logo and get it back as flowing liquid metal, rendered live with shaders.

    ToolFreegood agent friendliness
    Staff pick