# Extruded Text

> Solid 3D lettering with real depth, whose extrusion swings round to face away from the cursor like a sign under a moving light.

Category: Text · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/extruded-text

## When to use it

Retro, gaming, music and poster-style headlines, launch announcements and big statement words.

## How it works

Depth comes from stacked text shadows: one per pixel of depth, each a step further along the extrusion direction and a shade darker, so the sides read as solid. A final blurred shadow grounds the block on the page. The direction is two springs from -1 to 1; moving the pointer sets them to point away from it, so the extrusion swings round as if lit from the cursor, and rests down and to the right.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/extruded-text` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` |  | The heading. |
| `color` | `string` | `"#F6F1E8"` | Colour of the letters' face. |
| `side` | `string` | `"#0E7C86"` | Colour of the sides, shading towards black. |
| `depth` | `number` | `14` | Depth in one-pixel layers. |
| `interactive` | `boolean` | `true` | Turn away from the pointer. |
| `as` | `ElementType` | `"h2"` | Element to render. |

## Accessibility

- **Keyboard: Not applicable.** A heading, nothing to focus.
- **Screen readers: Pass.** Plain text with shadows, read normally.
- **Reduced motion: Pass.** With reduced motion on, the extrusion holds its resting angle.
- **Colour contrast: Pass.** The ivory face measures 17.0:1 against the page; the extrusion only adds depth behind it.