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.
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.
