Hey everyone! 👋
I’ve been playing around with Three.js inside Framer and wanted to share a new component I just wrapped up: an Interactive 3D Voxel Logo.
Basically, you just upload any standard flat logo (SVG or PNG) in the properties panel, and the component automatically analyzes the image and extrudes it into a 3D grid of outlined blocks.
A few cool features:
Instant 3D: No 3D modeling required—just drop in your image file.
Reactive Hover: The individual boxes dynamically scale and "inflate" as you move your mouse over different areas of the logo.
Interactive: You can grab, drag, and spin it around. It also has a smooth auto-idle spin.
Highly Optimized: Built entirely in vanilla Three.js (no heavy React Three Fiber libraries), so it runs at a butter-smooth 60fps and won't tank your site's performance.
You can tweak the outline thickness, colors, hover radius, and camera distance right from the Framer sidebar.
Would love to hear what you guys think or see how you use it in your projects! Let me know if you run into any bugs. 👇
Hey everyone! 👋
I’ve been playing around with Three.js inside Framer and wanted to share a new component I just wrapped up: an Interactive 3D Voxel Logo.
Basically, you just upload any standard flat logo (SVG or PNG) in the properties panel, and the component automatically analyzes the image and extrudes it into a 3D grid of outlined blocks.
A few cool features:
Instant 3D: No 3D modeling required—just drop in your image file.
Reactive Hover: The individual boxes dynamically scale and "inflate" as you move your mouse over different areas of the logo.
Interactive: You can grab, drag, and spin it around. It also has a smooth auto-idle spin.
Highly Optimized: Built entirely in vanilla Three.js (no heavy React Three Fiber libraries), so it runs at a butter-smooth 60fps and won't tank your site's performance.
You can tweak the outline thickness, colors, hover radius, and camera distance right from the Framer sidebar.
Would love to hear what you guys think or see how you use it in your projects! Let me know if you run into any bugs. 👇