Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Text

Pro

Tilt Text for React

Text that tilts in 3D to face the pointer, like a card in the hand, and settles flat when it leaves. For React with Base UI, when a headline should feel like an object you can pick up.

Framework

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.

Preview width

Turn it over

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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°.

Preview width

Inside a link or a button, keyboard focus lifts the text, flat, with its shadow under it: a still state that needs no pointer.

Preview width

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.

What happens on a touch screen?

A tap tips the text towards the finger, and it settles flat when the finger lifts.

What happens with reduced motion?

The text stays flat and its size doesn't change; hovered, it shows only its shadow.

API Reference

TiltText

<span> data-slot="tilt-text"

PropType
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"
render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string

Merged with the part's classes.

CSS variableType
--tilt-text-anglestring

The steepest tilt, at the edges (12deg).

--tilt-text-perspectivestring

How far the viewer is: nearer is more dramatic (800px).

All 97 text effects