Rotating 3D Logo

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.