On hover, each letter rolls over on a little 3D cube to reveal a fresh copy, one after another. Made for links and buttons.
Customize
Usage
import { RollingText } from "@/components/motionkit/rolling-text";
<a href="/work" className="rounded-xl border px-5 py-3">
<RollingText text="View our work" />
</a>Motion
The exact curves this component runs, plotted with Motion's own maths.
Letter roll
Hover or focus
Navigation links, buttons and footer links on portfolios and agency sites, a small reward that rewards hovering.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/rolling-text. It saves the file to components/motionkit and installs its dependencies.
Rolling Text is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the letters never roll.
Shuffle Text
On hover or focus, the letters swap places a few times and slide home. Made for links and buttons.
Wave Text
Letters lift and settle one after another, like a wave running through the word: on hover, or as a gentle loop.
Text Scramble
Text that decodes itself character by character, terminal style.
Customize
Usage
import { RollingText } from "@/components/motionkit/rolling-text";
<a href="/work" className="rounded-xl border px-5 py-3">
<RollingText text="View our work" />
</a>Motion
The exact curves this component runs, plotted with Motion's own maths.
Letter roll
Hover or focus
The live preview is free to explore. Plus unlocks the source for Rolling Text and every other premium component.