Text built from a stack of shifted layers that forms a solid extrusion and tilts with the pointer.
npx shadcn@latest add https://hyperblur.dev/r/text-3d-extrude.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-3d-extrude.tsx.
import { Text3dExtrude } from "@/components/hyperblur/text-3d-extrude"
<Text3dExtrude text="TURBO" className="font-display text-7xl font-bold" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. |
| depth | number | 30 | Extrusion depth in pixels. |
| layers | number | 16 | Number of stacked copies. More layers give a smoother side at a higher paint cost. |
| tilt | number | 28 | Maximum rotation in degrees. |
| color | string | "#ffffff" | Color of the front face. |
| sideColor | string | "#2f7bff" | Color of the side. It darkens toward the back. |
| shadow | boolean | true | Soft shadow behind the extrusion. |