shadcn.io is an independent project built on shadcn/ui
Text
ProTilt Text for Solid
Text tilts in 3D toward the pointer like a card in the hand, then settles flat. For Solid with Ark UI, when a headline should feel like an object.
Tilt Text turns a headline in 3D towards the pointer: the side under the pointer dips away and the far side rises, as if you were tilting a card to look at it, and the text lifts a little off the page, its shadow under it. When the pointer leaves, it settles back flat.
Use it for a short headline, a hero title or the heading of a card. For letters that each answer the pointer on their own, use Magnet Text or Elastic Text; for a shine that follows the pointer, Gloss Text. The pointer's place across the text is written to two registered CSS properties that a CSS transition eases, and a CSS utility the install adds to your stylesheet turns them into rotations under a perspective. There's no animation library and no frame loop.
Installation
Usage
import { TiltText } from "@/components/ui/tilt-text";<h2>
<TiltText text="Turn it over" />
</h2>Demos
Intensity
intensity is how far the text tilts with the pointer at an edge: subtle 6°, medium 12°, the default, and strong 20°.
Link
Inside a link or a button, keyboard focus lifts the text, flat, with its shadow under it: a still state that needs no pointer.
Accessibility
The text stays real text, read once by screen readers and selectable. Turning the whole text is large motion, so with reduced motion it doesn't tilt or grow; hovered, only its shadow shows. Give it a little room: lifted and tilted, it can reach a few pixels past its box.
FAQ
Which way does it tilt?
Towards the pointer, like a card turned to face it: the side under the pointer dips away from you and the opposite side rises. Leaving lets it ease back flat.
Can each letter tilt on its own?
Not in Tilt Text: turning the text as one piece keeps it readable at every angle and needs only one pair of values. For letters that each answer the pointer, use Magnet Text or Elastic Text.
How do I make it more dramatic?
intensity="strong" tilts it further. --tilt-text-perspective is how far away the viewer is, 800px by default: a smaller value, such as 400px, deepens the 3D.
How does it follow the pointer smoothly?
On each move over the text, the pointer's place across it is written into --tilt-text-x and --tilt-text-y. They're registered as numbers, so a transition eases the tilt there instead of jumping; leaving removes them, and it settles back flat.
API Reference
TiltText
<span> data-slot="tilt-text"
textstring
The text.
intensity?"subtle" | "medium" | "strong"
How far the text tilts at the edges: subtle, medium, or strong
for a steep turn.
- Type
"subtle" | "medium" | "strong"- Default
"medium"
class?string
Merged with the part's classes.
--tilt-text-anglestring
The steepest tilt, at the edges (12deg).
--tilt-text-perspectivestring
How far the viewer is: nearer is more dramatic (800px).
