3D Components

3D Components

Add 3D Easily to your React Projects

Choose a 3D shape, customize it and then add it to your React Project
No 3D experience needed

Preview

See how it looks on your site

yourwebsite.com

Your React page with 3D

This is how your website could look with 3D components.Customize me↓

ðŸŠķ
1.5 KB
⚡ <0.1s
Custom
Spins like a top
How fast it rotates

Your Code

Copy this into your React app

Ready to use
import Shape54 from './components/Shape54';

export default function App() {
  return (
    <div style={{ width: '350px', height: '350px', zIndex: 9999, pointerEvents: 'auto' }}>
      <Shape54
        modelPath="54.glb"
        autoScale={false}
        color="#ffffff"
        material="chrome"
        spin
        scaleIn
        slideIn
        onHover="color"
        hoverColor="#3b82f6"
        userCanRotate
      />
    </div>
  );
}
Experimental feature - may work inconsistently

⚡ Lightning-Fast 3D Models

These 3D models load faster than most images!

ðŸŠķ
1.5 KB
Smaller than a single emoji! ðŸĪŊ
⚡
⚡ <0.1s
Load Time
Size Comparison
1.5 KB
Typical Image (~500KB)

🚀 Most shapes are under 50KB — smaller than a single emoji in some fonts!

â–ķ

How to use

Quick video guide