Logo Sculpture
Any SVG logo extruded into a glossy 3D object that builds in, sways at rest and leans toward the pointer.
Controls
<LogoSculpture />About
Your logo, in three dimensions. Every filled shape of an SVG mark is extruded with a soft bevel and a clear-coat finish, painted across the palette (or kept in its own colours). The pieces rise into place left to right, the mark sways and floats at rest, and on hover each piece leans out toward the pointer while the mark turns to face it. New in VibeBox Motion: VibeBox's own mark sculpture is drawn for its logo only; this one takes any SVG.
Use it when
- A brand moment on a home or about page.
- Launch and coming-soon pages that should feel premium.
Skip it when
- Marks made of thin strokes (strokes are ignored; convert them to filled shapes).
- A page already has a 3D centrepiece.
Install
The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.
Code
The source is part of VibeBox Motion Pro.
Licensed per seat; it installs with the same shadcn command once Pro opens.
See Pro and join the waitlistProps
| Prop | Type | Default | Description |
|---|---|---|---|
| svg | string | a sample spark | SVG markup of the mark; filled shapes are extruded. |
| colors | "spectrum" | "svg" | "spectrum" | Paint with the palette or keep each shape's fill. |
| depth | number | 0.16 | Extrusion depth as a share of the mark's larger side. |
| label | string | "A logo extruded into a glossy 3D object" | Accessible name for the artwork. |
| poster | ReactNode | — | Shown until the first frame and without hardware WebGL2. |
| className | string | — | Merged with cn(); give it a size or aspect ratio. |
Accessibility and motion
- Keyboard
- Not focusable; the artwork has no actions.
- Screen readers
- role="img" with a descriptive label; the live caption is hidden.
- Touch
- A touch on the artwork makes it react like a hover; it never blocks scrolling.
- Reduced motion
- A composed still frame of the finished piece; no idle motion or hover response.
Edge cases and limits
- SVGs with transforms, gradients or masks extrude their outlines only.
- Text must be converted to outlines first.
- Without hardware WebGL2 (software renderers included) the poster stays.
Related
Equalizer Ring
FreeA crown of light bars pulsing like a visualizer around a floating glass box; bars rise toward the pointer.
3D · three.js
Infinity Ribbon
FreeA glossy spectrum ribbon twisted into a figure-eight, with a travelling light pass; it bends toward the pointer.
3D · three.js
Launch Stack
FreeA website taken apart into four glass layers: data, logic, design and the live site, with light rising through them.
3D · three.js