Rolling Text for React

Rolling Text turns each character over in place: its face rolls up and away while the same character rolls in from below, in perspective, one character after the next, so a wave of rolls runs along the line. It plays once when the page shows it, once when it scrolls into view, or every time the pointer comes over it.

Use it for a short label with a mechanical feel: a departures board, a status, a navigation link that rolls on hover. For words that take turns, use Flip Words; for numbers that roll to a new value, Sliding Number. Each character is the front face of a small cube turning on an axis behind the text, moved by two CSS keyframe animations the install adds to your stylesheet, delayed by the character's place in the line, with no animation library. With reduced motion the text stands still.

Installation

Usage

import { RollingText } from "@/components/ui/rolling-text";

<h2>
  <RollingText text="Now boarding" />
</h2>

Demos

Hover

trigger="hover" rolls the text every time the pointer comes over it, and when the link or button around it gets keyboard focus, so a navigation link answers both. On a touch screen it simply shows the text.

Direction

direction is which way the characters turn: up, the default, rolls each face up and away with the next one coming from below; down rolls them the other way.

Timing

duration is how long one character takes to roll over, 600 ms by default, and stagger the time between one character and the next, 50 ms. A short pair suits a small label; a long one makes a slow wave across a title. trigger="view" waits until the text scrolls into view.

Accessibility

Screen readers read the text once, as plain text, from a visually hidden copy: the rolling characters are hidden from them. Words wrap whole, and the line keeps its direction on a right-to-left page. With reduced motion nothing rolls, on any trigger.

FAQ

API Reference