React Rotating Text

Powered by

Motion

Framer Motion

Ever seen rotating text that spins like a broken carousel or jumps between words like it's having hiccups? Most implementations either fade in/out (boring) or slide horizontally (jarring layout shifts). This component slides text vertically with proper overflow handling, so the rotation looks natural and doesn't break your layout.

Smooth vertical text rotation

Text that cycles through multiple phrases without layout chaos:

import { RotatingText } from '@/components/ui/shadcn-io/rotating-text';const RotatingTextDemo = () => {  return (    <RotatingText      className="text-4xl font-semibold"      text={['Rotating', 'Text', 'Demo']}    />  );};export default RotatingTextDemo;

'use client'; import * as React from 'react';import {  AnimatePresence,  motion,  type HTMLMotionProps,  type Transition,} from 'motion/react'; import { cn } from '@/lib/utils'; type RotatingTextProps = {  text: string | string[];  duration?: number;  transition?: Transition;  y?: number;  containerClassName?: string;} & HTMLMotionProps<'div'>; function RotatingText({  text,  y = -50,  duration = 2000,  transition = { duration: 0.3, ease: 'easeOut' },  containerClassName,  ...props}: RotatingTextProps) {  const [index, setIndex] = React.useState(0);   React.useEffect(() => {    if (!Array.isArray(text)) return;    const interval = setInterval(() => {      setIndex((prevIndex) => (prevIndex + 1) % text.length);    }, duration);    return () => clearInterval(interval);  }, [text, duration]);   const currentText = Array.isArray(text) ? text[index] : text;   return (    <div className={cn('overflow-hidden py-1', containerClassName)}>      <AnimatePresence mode="wait">        <motion.div          key={currentText}          transition={transition}          initial={{ opacity: 0, y: -y }}          animate={{ opacity: 1, y: 0 }}          exit={{ opacity: 0, y }}          {...props}        >          {currentText}        </motion.div>      </AnimatePresence>    </div>  );} export { RotatingText, type RotatingTextProps };

Built with TypeScript and shadcn/ui, using Motion for smooth vertical slide transitions. Perfect for React applications that need dynamic text displays. Each text change flows naturally upward, the container maintains consistent dimensions, and you can control timing without fighting CSS keyframes in your Next.js projects.

Installation

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

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

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

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

Usage

import { RotatingText } from "@/components/text/rotating-text";

<RotatingText 
  text={["Build faster", "Ship better", "Scale easier"]}
  duration={3000}
  transition={{ duration: 0.5, ease: "easeInOut" }}
/>

Why most rotating text implementations suck

Most developers use opacity transitions (text just fades, looks weak) or horizontal sliding (breaks layout when text lengths differ). Others try CSS animations with transform3d but end up with stuttering or weird timing issues in their React components.

This React component uses vertical sliding with AnimatePresence in "wait" mode—the old text slides up and out while the new text slides up from below. We set overflow: hidden on the container so the sliding happens invisibly, maintaining clean boundaries. Built for modern JavaScript development workflows with full TypeScript support.

The timing is crucial: 2-3 seconds between rotations gives users time to read, 0.3-0.5s transition keeps it snappy. Too fast and it's distracting, too slow and it feels broken. We handle the interval cleanup automatically so you don't get memory leaks in your Next.js applications.

Features

• Vertical slide transitions that don't break layouts in React applications
• Automatic rotation timing with proper cleanup for Next.js projects
• Container overflow handling for clean text boundaries
• Support for single text or arrays of rotating phrases
• Complete TypeScript support with full type definitions and IntelliSense
• Works seamlessly with shadcn/ui design system and theme colors
• Free open source component that respects reduced motion preferences
• Built for modern JavaScript frameworks with performance optimization

API Reference

RotatingText

Animated text rotation with vertical slide transitions.

Timing Guidelines

Optimal rotation timing for different use cases:

Common gotchas

Layout jumps during rotation: Different text lengths cause container size changes in React applications. Set a fixed width or min-width on the container, or use consistent text lengths for stable layouts.

Rotation stops after unmounting: This React component cleans up intervals automatically, but if you're conditionally rendering in Next.js, make sure the parent component stays mounted.

Text slides wrong direction: The y prop controls slide direction with full TypeScript support. Negative values slide up (default), positive values slide down. Match your design intent.

Animation feels choppy: Default 300ms transition works for most React applications. For longer text, increase to 400-500ms. For quick rotations, decrease to 200ms but not lower in your JavaScript implementations.

Memory leaks with rapid remounts: The component handles cleanup automatically, but avoid rapidly mounting/unmounting rotating text components in React. Cache them or use conditional visibility instead for better performance.

Integration with other components

Perfect for hero sections in Card layouts or dynamic headings in Sheet overlays within React applications. Combines well with Button components for rotating call-to-action text in Next.js projects.

For dashboard displays, pair with Badge for rotating status indicators or Progress for dynamic loading messages. This free open source component works great with Tabs for section-specific rotating content, all with complete TypeScript integration.

Questions developers actually ask