ComponentsCursor
Tilt text
Extruded type tilts toward the pointer.
Installation
$ npx shadcn@latest add @textlab/tilt-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { TiltText } from "@/components/textlab/tilt-text/tilt-text";
<TiltText as="h1" text="Depth" />Variants
extrudefloatshadowProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "extrude" | "float" | "shadow" | "extrude" | Solid depth, floating above a ground shadow, or a long pointer-driven shadow. |
| tilt | number | 18 | Largest tilt in degrees. |
| depth | number | 12 | Extrusion layers. |
| sideColor | string | a darker mix of the text color | Color of the extruded sides. |
| 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
- Bold single words in hero sections.
- Product names and numbers with a physical feel.
Skip it
- Long or wrapping text.
- Dense layouts; the tilt needs breathing room.
Accessibility and motion
Accessibility
- Depth layers are aria-hidden copies; the word is read once.
- At rest the text faces forward and reads normally.
Motion
- The tilt eases toward the pointer and back to center when it leaves.
Reduced motion. Still, front-facing text with its depth intact.
Performance
- Transforms on one 3D group; layers are static inside it.