ComponentsCursor
Extrude text
Depth grows from the letters on hover.
Press
Installation
$ npx shadcn@latest add @textlab/extrude-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { ExtrudeText } from "@/components/textlab/extrude-text/extrude-text";
<ExtrudeText as="h2" text="Pop" variant="long-shadow" />Variants
blocklong-shadowstackProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "block" | "long-shadow" | "stack" | "block" | A solid slab, a fading diagonal shadow, or stacked outlines. |
| depth | number | 14 | Depth steps at full extrusion. |
| color | string | var(--tl-accent) | Depth color. |
| hover | boolean | true | Grow on hover from a shallow rest; false keeps it fully extruded. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Retro, poster and toy-like brands.
- Big words that should feel pressable.
Skip it
- Small text; the depth smears it.
- Minimal, quiet interfaces.
Accessibility and motion
Accessibility
- Plain text with shadows; nothing is split.
- Focus-visible grows it too when the element is focusable.
Motion
- The face lifts up and left as depth grows, so it feels like it rises off the page.
- 260 ms with the enter ease; hover only counts on devices with a fine pointer, so taps never leave it stuck raised.
Reduced motion. Fully extruded and still.
Performance
- Pure CSS: a registered property interpolates the shadow stack.