Rolling Text

3D rolling text animation with character-by-character reveal effects. Perfect for React applications requiring engaging text transitions with Next.js integration and TypeScript support.

Motion

Loading component...

'use client'; import * as React from 'react';import {  motion,  useInView,  type UseInViewOptions,  type Transition,} from 'motion/react'; const ENTRY_ANIMATION = {  initial: { rotateX: 0 },  animate: { rotateX: 90 },}; const EXIT_ANIMATION = {  initial: { rotateX: 90 },  animate: { rotateX: 0 },}; const formatCharacter = (char: string) => (char === ' ' ? '\u00A0' : char); type RollingTextProps = Omit<React.ComponentProps<'span'>, 'children'> & {  transition?: Transition;  inView?: boolean;  inViewMargin?: UseInViewOptions['margin'];  inViewOnce?: boolean;  text: string;}; function RollingText({  ref,  transition = { duration: 0.5, delay: 0.1, ease: 'easeOut' },  inView = false,  inViewMargin = '0px',  inViewOnce = true,  text,  ...props}: RollingTextProps) {  const localRef = React.useRef<HTMLSpanElement>(null);  React.useImperativeHandle(ref, () => localRef.current!);   const inViewResult = useInView(localRef, {    once: inViewOnce,    margin: inViewMargin,  });  const isInView = !inView || inViewResult;   const characters = React.useMemo(() => text.split(''), [text]);   return (    <span data-slot="rolling-text" {...props} ref={ref}>      {characters.map((char, idx) => (        <span          key={idx}          className="relative inline-block perspective-[9999999px] transform-3d w-auto"          aria-hidden="true"        >          <motion.span            className="absolute inline-block backface-hidden origin-[50%_25%]"            initial={ENTRY_ANIMATION.initial}            animate={isInView ? ENTRY_ANIMATION.animate : undefined}            transition={{              ...transition,              delay: idx * (transition?.delay ?? 0),            }}          >            {formatCharacter(char)}          </motion.span>          <motion.span            className="absolute inline-block backface-hidden origin-[50%_100%]"            initial={EXIT_ANIMATION.initial}            animate={isInView ? EXIT_ANIMATION.animate : undefined}            transition={{              ...transition,              delay: idx * (transition?.delay ?? 0) + 0.3,            }}          >            {formatCharacter(char)}          </motion.span>          <span className="invisible">{formatCharacter(char)}</span>        </span>      ))}       <span className="sr-only">{text}</span>    </span>  );} export { RollingText, type RollingTextProps };

Installation

npx shadcn@latest add https://www.shadcn.io/registry/rolling-text.json

npx shadcn@latest add https://www.shadcn.io/registry/rolling-text.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/rolling-text.json

bunx shadcn@latest add https://www.shadcn.io/registry/rolling-text.json

Features

3D character animations with rotateX transforms for realistic rolling effects using Motion
Staggered reveals with configurable delay timing for character-by-character animations
In-view triggers with viewport detection and once-only animation controls
Accessibility support with proper screen reader text and ARIA attributes
TypeScript support with complete interface definitions and prop validation
shadcn/ui compatibility using standard React patterns and flexible styling

Use Cases

This free open source React component works well for:

Hero sections - Eye-catching headlines and taglines built with Next.js
Loading states - Text reveals during content loading using TypeScript and Tailwind CSS
Page transitions - Smooth text animations between route changes
Interactive elements - Hover effects and scroll-triggered text animations

API Reference

RollingText

Prop	Type	Default	Description
`text`	`string`	required	The text content to animate with rolling effects
`inView`	`boolean`	`false`	Trigger animation when component enters viewport
`inViewMargin`	`string`	`"0px"`	Margin for viewport detection trigger
`inViewOnce`	`boolean`	`true`	Only animate once when entering viewport
`transition`	`Transition`	`{ duration: 0.5, delay: 0.1, ease: 'easeOut' }`	Motion transition configuration

Transition Options

duration - Animation duration per character (in seconds)
delay - Stagger delay between characters (in seconds)
ease - Easing function for smooth animations

Implementation Notes

Each character is individually animated with 3D transforms
Uses CSS perspective and backface-hidden for smooth 3D effects
Invisible spacer maintains layout during animation
Screen reader text ensures accessibility compliance
Compatible with shadcn/ui design system and theming
Optimized for performance with transform-based animations

Reactrolling-text