Rolling Text

Installation

Usage

import { RollingText } from '@/components/sora-ui/texts/rolling-text';

export default function Page() {
  return (
    <RollingText
      className="font-bold text-4xl uppercase tracking-tight"
      text="MOTION FIRST"
    />
  );
}

Roll downward instead of up, and render as a heading:

<RollingText as="h1" direction="down" text="FOR REACT" />

Trigger every time it re-enters the viewport, with a wider margin:

<RollingText once={false} inViewMargin="-25%" text="ALWAYS ROLLING" />

Props

When to Use

Use RollingText for a one-time reveal of a fixed string — hero headlines, section titles, anything that should roll into place once as the page or section is scrolled into view. It differs from Text Roll, which rolls between changing text values, and Text Loop, which cycles through a list of items on an interval.

Accessibility

The full string is exposed via aria-label on the root element; the individual rolling letter spans are aria-hidden, so screen readers announce the plain text rather than each animated glyph. When prefers-reduced-motion: reduce is set, the roll is skipped entirely and the text renders statically — no extra configuration needed.

Credits

Adapted from Skiper UI. Independent implementation for the Sora UI registry. Not affiliated with the original authors.