ExtrudedText

Chunky 3D extruded lettering that tilts toward the pointer.

RAD FX

bash
npx shadcn@latest add https://www.rad-ui.com/r/extruded-text.json

React
import ExtrudedText from "@/components/fx/extruded-text"

<ExtrudedText as="h1" text="RAD FX" />

Real, unsplit text; the depth is text-shadow.
Tilt is capped and off for touch input.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) keeps the depth but disables the tilt.

Prop	Type	Default	Description
text	string	—	The text.
as	'p' \| 'span' \| 'div' \| 'h1' \| 'h2' \| 'h3' \| 'h4'	'span'	Element to render.
depth	number	10	Extrusion depth in px.
sideColor	string	'#6d28d9'	Colour of the sides.
tilt	boolean	true	Tilt toward the pointer.
maxTilt	number	12	Maximum tilt in degrees.