# Rolling Text

> On hover, each letter rolls over on a little 3D cube to reveal a fresh copy, one after another. Made for links and buttons.

Category: Text · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/rolling-text

## When to use it

Navigation links, buttons and footer links on portfolios and agency sites, a small reward that rewards hovering.

## How it works

Each letter is a tiny cube one line tall, built from two faces with backface-visibility hidden: the front one pushed half a line towards you, and a copy rotated to the bottom. On hover or focus, each cube turns 90 degrees about its horizontal axis in a short stagger, so the bottom copy rolls up into place while the front rolls away. It listens on the enclosing link or button, so the whole target triggers it.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/rolling-text` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` |  | The word or short phrase. |
| `stagger` | `number` | `0.025` | Seconds between letters. |
| `duration` | `number` | `0.45` | Seconds for each letter to roll. |
| `trigger` | `"parent" \| "self"` | `"parent"` | Roll on the enclosing element, or on the text only. |
| `rollColor` | `string` |  | Colour of the face that rolls into view. |

## Accessibility

- **Keyboard: Pass.** Rolls when focus lands on the enclosing link or button, not only on hover.
- **Screen readers: Pass.** The word is read once from a visually hidden copy; the letter cubes are hidden.
- **Reduced motion: Pass.** With reduced motion on, the letters never roll.
- **Colour contrast: Not applicable.** Inherits your link or button colours.