184 Components
Perspective Tilt Text
TextLarge display typography that tilts in 3D perspective with realistic depth layer separation and parallax extrusion shadow.
PERSPECTIVE 3D
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/perspective-tilt-text.json"
Props
TypeScript props supported by <PerspectiveTiltText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Display text phrase or large metric to render. |
| maxTilt | number | 18 | Maximum angular tilt limit in degrees. |
| depth | number | 8 | Parallax extrusion shadow displacement in pixels. |
Key Features
- Real-time cursor coordinate normalization calculating 3D rotateX and rotateY angles.
- Dual-layer transform-style: preserve-3d structure simulating physical material thickness.
- Smooth Hooke's Law spring interpolation preventing harsh pointer jitter.
- Prefe-reduced-motion fallback disabling 3D transformations.
Keyboard & Accessibility
- Extrusion underlayer masked with aria-hidden='true' to avoid double-reading.
- Accessible font rendering preserved.