Tilt Text for Vue

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

<script setup lang="ts">
import { TiltText } from "@/components/ui/tilt-text";
</script>

<template>
  <h2>
    <TiltText text="Turn it over" />
  </h2>
</template>

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

API Reference