PackageMotion
React Three Fiber
Three.js as React components, with a huge helper ecosystem.
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 friendlinessYes. 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/dreiRelated resources
ShaderGradient 
ShaderGradient
Slow-moving 3D gradients for React, Framer and Figma that look like expensive motion design.
excellent agent friendlinessPackageFreeOpen sourceAceternity UI 
Aceternity UI
Showy, copy-paste React components for landing pages that need a moment.
good agent friendlinessComponent libraryLiquid Logo 
Liquid Logo
Drop in your logo and get it back as flowing liquid metal, rendered live with shaders.
good agent friendlinessToolFreeStaff pickThinking Orbs 
Thinking Orbs
An animated orb that shows what your AI is doing: listening, thinking, searching, working.
excellent agent friendlinessPackageFreeStaff pick