Extruded Depth Text React component
Letters with a solid 3D block behind them that leans away from the pointer, or turns slowly by itself, built entirely from text shadows.
About the Extruded Depth Text component
Extruded Depth Text gives a word real mass. A solid block runs back from the letters, and it leans away from the pointer as you move, as if you were walking around it.
It is built entirely from text shadows, so the letters stay as real, selectable text. Left alone, the block turns slowly by itself.
When to use it
Use it for big display words on campaign, music and event pages.
It needs size and a heavy weight, so keep it for one word or a short title.
Installation
Add the Extruded Depth Text component to your project with the shadcn CLI. It lands in components/extruded-depth-text.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/extruded-depth-textProps
<ExtrudedDepthText /> accepts 5 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| text | string | "DEPTH" |
| depth Layers in the block behind the letters. | number | 18 |
| near Colour of the block nearest the letters. | string | "#5E6AD2" |
| far Colour of the block at the back. | string | "#14162B" |
| idle The block keeps turning slowly when nothing is steering it. | boolean | true |
- textstringDefault: "DEPTH"
- depth
Layers in the block behind the letters.
numberDefault: 18 - near
Colour of the block nearest the letters.
stringDefault: "#5E6AD2" - far
Colour of the block at the back.
stringDefault: "#14162B" - idle
The block keeps turning slowly when nothing is steering it.
booleanDefault: true
Extruded Depth Text FAQ
- How deep can it go?
- depth sets the number of layers. Around 12 to 24 works well.
- Can I change the colours?
- Yes. near and far set the block from front to back, and the letters use the text colour.
- Can I stop the slow turn?
- Yes, with idle={false}.
- What about reduced motion?
- The block stays at one fixed angle.
