React Rolling Text

Powered by

Motion

Framer Motion

Ever seen text that "rolls in" and looks like it's having a seizure? Most 3D text animations either rotate too fast (nauseating) or use fake transforms that look flat. This component actually uses proper 3D perspective with realistic physics, so characters roll into view like they're real objects, not spinning logos from 1995.

3D character rolling animations

Text that rolls in one letter at a time with proper depth and perspective:

import { RollingText } from '@/components/ui/shadcn-io/rolling-text';const RollingTextDemo = () => {  return <RollingText className="text-4xl" text="Rolling Text" />;};export default RollingTextDemo;

'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 };

Built with TypeScript and shadcn/ui, using Motion for hardware-accelerated 3D transforms in React applications. Each character rotates individually with realistic easing and stagger timing. No motion sickness, no flat spins, just smooth rolling text that looks natural in your Next.js projects.

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

Usage

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

<RollingText 
  text="Rolling into view"
  inView={true}
  transition={{ duration: 0.6, delay: 0.08, ease: "easeOut" }}
/>

Why most rolling text animations suck

Most developers use 2D rotations (rotateZ) which look flat and fake in React components. Others use rotateX but mess up the perspective, making text look like it's spinning in place instead of rolling into the page. The worst ones animate all characters at once, creating visual chaos.

This React component uses proper 3D transforms with rotateX on individual characters, built for modern JavaScript applications. We set the transform-origin to the bottom of each character, so they roll up from below like real objects. The perspective and backface-visibility settings create actual depth, not fake spinning. Full TypeScript support ensures type safety in your development workflow.

Each character animates with a slight delay (stagger), so your brain can follow the motion in Next.js applications. Start all at once and it's just noise. Space them 80ms apart and suddenly it's readable rolling text that feels natural.

Features

• Real 3D character rotations with proper perspective and depth for React applications
• Staggered reveals that don't overwhelm the visual system in JavaScript projects
• In-view detection so animations trigger when users see them
• Hardware acceleration using CSS transforms for 60fps performance in Next.js
• Complete TypeScript support with full type definitions and IntelliSense
• Works seamlessly with shadcn/ui design system and respects theme colors
• Free open source component that's screen reader friendly with accessibility

API Reference

RollingText

3D rolling text animation with character-by-character reveals.

Animation Timing

Fine-tune the rolling effect:

Common gotchas

Characters look flat: Make sure the parent container has enough space for the 3D effect in your React application. This component needs room for the perspective transform to work properly.

Animation feels choppy: Avoid duration under 0.3 seconds in JavaScript implementations. Characters need time to complete the 90-degree rotation smoothly. Fast rotations look mechanical, not natural in React components.

Stagger timing feels wrong: Default 0.1s delay works for most text with full TypeScript support. Longer phrases might need 0.08s for faster reveals, shorter text can use 0.12s for more dramatic effect in Next.js projects.

Layout shifts during animation: This React component maintains text space during animation, but if characters have different widths, slight shifting might occur. Use monospace fonts for perfectly stable layouts.

Text becomes unreadable: High contrast is crucial for 3D text in modern JavaScript applications. Dark text on light backgrounds (or vice versa) works best. Subtle color combinations get lost in the rotation blur.

Integration with other components

Perfect for hero sections in Card layouts or attention-grabbing headings in Sheet overlays within React applications. Combines well with Button components for sequential reveals in Next.js projects.

For onboarding flows, pair with Progress indicators showing loading states. This free open source component works great with Tabs for section transitions and Alert for important announcements, all with complete TypeScript integration.

Questions developers actually ask