Solid 3D lettering with real depth, whose extrusion swings round to face away from the cursor like a sign under a moving light.
SOLID
Customize
Usage
import { ExtrudedText } from "@/components/motionkit/extruded-text";
<ExtrudedText as="h1" text="SOLID" className="text-8xl font-black" />Motion
The exact curves this component runs, plotted with Motion's own maths.
Extrusion turn
Pointer moves
Retro, gaming, music and poster-style headlines, launch announcements and big statement words.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/extruded-text. It saves the file to components/motionkit and installs its dependencies.
Extruded Text is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the extrusion holds its resting angle.
Split-Flap Display
An airport departures board: every tile flips through its drum, one character at a time, to land on your text.
Rolling Text
On hover, each letter rolls over on a little 3D cube to reveal a fresh copy, one after another. Made for links and buttons.
Gradient Text
Headline text with a slowly flowing, seamlessly looping gradient.
SOLID
Customize
Usage
import { ExtrudedText } from "@/components/motionkit/extruded-text";
<ExtrudedText as="h1" text="SOLID" className="text-8xl font-black" />Motion
The exact curves this component runs, plotted with Motion's own maths.
Extrusion turn
Pointer moves
The live preview is free to explore. Plus unlocks the source for Extruded Text and every other premium component.