.png)
4 months ago
3
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
This is how your website could look with 3D components.Customize me→↓
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
scale={0.42}
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! 🤯
▶
How to use
Quick video guide
Get Shape 54
Choose your option
Single Shape
Just this one shape
React component✓
3D model file✓
TypeScript support✓
Buy Multiple Shapes
Better value for more shapes
All
36
Shapes + Future Releases
Everything + all future packs
⚠️ Limited Time Launch Offer
This bundle is only available now that I'm starting. Later, only individual shapes and smaller bundles will exist.
📥 Download instantly • 💳 Secure payment
Float up and downSlide side to sideSpin rotationPulse scale
Spin Axis
Spins like a top
Rotation Speed: 1x
How fast it rotates
Follow Mouse
Shape looks at your cursor
Your Code
Copy this into your React app
Ready to use
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! 🤯
🚀 Most shapes are under 50KB — smaller than a single emoji in some fonts!
▶
How to use
Quick video guide
![AI and Cybersecurity: Dan Boneh Interviews Sam Altman [video]](https://www.youtube.com/img/desktop/supported_browsers/firefox.png)
