Rotating 3D Logo

Metallic 3D logo from any SVG

Give any 2D logo a life of its own — in 3D. Drop in your own SVG and this component extrudes it into a fully lit, metallic 3D object: real PBR reflections, a hand-tuned gradient material, and a shadow that's rendered live from the object's actual silhouette as it turns — not a static blob underneath it. Visitors can click and drag to spin it themselves; let go and it keeps turning with momentum before settling back into its slow auto-rotation. Built entirely in Three.js, so it's a real 3D scene — not an embedded video or GIF. Customization at a glance: - Upload any single-path SVG logo (or keep the built-in one) - Extrusion depth, bevel size & smoothness - Two-stop gradient with adjustable angle - Metalness, roughness, clearcoat, and highlight sharpness - Reflection intensity/blur, ambient & key light strength - Rotation speed and 3-axis tilt - Shadow opacity, distance, and blur - Camera zoom Whether you're building a hero section for a product launch, an agency portfolio intro, a SaaS landing page, or just want a logo reveal that feels a little more alive than a static PNG, this drops straight in and adapts to your brand's colors and lighting in seconds. Works at any size, from a small favicon-style badge to a full-bleed hero, and supports touch dragging on mobile out of the box. Live demo: Click here Questions or ideas for a feature? Reach out — happy to help you get the most out of it.

Metallic 3D logo from any SVG