-----------------------------------------------------------------------------------------------

Add Premium Components To Your Projects:

Features

• Convert PNG or SVG logos into dynamic 3D voxel artwork

• Smooth WebGL rendering powered by Three.js

• Interactive drag-to-rotate controls

• Hover-reactive motion and auto-rotation effects

• Adjustable voxel depth and grid density

• Supports original logo colors or custom voxel colors

• Matte material controls for modern soft lighting

• Responsive scaling across all screen sizes

• Optimized rendering with viewport visibility detection

• Clean shadow rendering with physical materials

Customization Options

• Upload custom transparent logo images

• Toggle original logo colors on or off

• Adjust saturation intensity

• Customize voxel color and grid line color

• Control voxel depth and detail density

• Modify grid line thickness

• Adjust logo scale independently

• Fine-tune roughness, metalness, and clearcoat

• Enable or disable autoplay rotation

• Control animation speed and hover interaction

• Toggle drag rotation functionality

How to Use

1. Add the component to your Framer project

2. Upload a transparent PNG or SVG logo

3. Adjust voxel detail and depth settings

4. Customize colors or keep original branding colors

5. Fine-tune lighting and material appearance

6. Enable hover or drag interactions

7. Publish your site with fully interactive 3D branding

Use Cases

• SaaS landing page hero sections

• Interactive startup branding showcases

• Creative portfolio websites

• Web3 and AI product presentations

• Agency and studio websites

• Product launch animations

• Modern tech brand identities

• Gaming and futuristic UI experiences