React Container Text Flip

Powered by

Motion

Most text cycling components have jarring width changes that make your layout jump around. Users see the container constantly resizing as words change, creating a distracting, unprofessional experience. This component smoothly animates between words with intelligent width transitions and letter-by-letter reveals, maintaining visual stability while creating engaging text effects.

Smooth word cycling with dynamic container sizing

Text that transitions between words with fluid width animations and letter reveals:

import { ContainerTextFlip } from '@/components/ui/shadcn-io/container-text-flip';const ContainerTextFlipDemo = () => {  return (    <div className="flex items-center justify-center p-8">      <ContainerTextFlip        words={["better", "modern", "awesome", "beautiful"]}        interval={2500}        animationDuration={600}      />    </div>  );};export default ContainerTextFlipDemo;

'use client';import React, { useState, useEffect, useId } from 'react';import { motion } from 'motion/react';import { cn } from '@/lib/utils';export interface ContainerTextFlipProps {  /** Array of words to cycle through in the animation */  words?: string[];  /** Time in milliseconds between word transitions */  interval?: number;  /** Additional CSS classes to apply to the container */  className?: string;  /** Additional CSS classes to apply to the text */  textClassName?: string;  /** Duration of the transition animation in milliseconds */  animationDuration?: number;}export function ContainerTextFlip({  words = ['better', 'modern', 'beautiful', 'awesome'],  interval = 3000,  className,  textClassName,  animationDuration = 700,}: ContainerTextFlipProps) {  const id = useId();  const [currentWordIndex, setCurrentWordIndex] = useState(0);  const [width, setWidth] = useState(100);  const textRef = React.useRef<HTMLDivElement>(null);  const updateWidthForWord = () => {    if (textRef.current) {      // Add some padding to the text width (30px on each side)      const textWidth = textRef.current.scrollWidth + 30;      setWidth(textWidth);    }  };  useEffect(() => {    // Update width whenever the word changes    updateWidthForWord();  }, [currentWordIndex]);  useEffect(() => {    const intervalId = setInterval(() => {      setCurrentWordIndex((prevIndex) => (prevIndex + 1) % words.length);      // Width will be updated in the effect that depends on currentWordIndex    }, interval);    return () => clearInterval(intervalId);  }, [words, interval]);  return (    <motion.div      layout      layoutId={`words-here-${id}`}      animate={{ width }}      transition={{ duration: animationDuration / 2000 }}      className={cn(        'relative inline-block rounded-lg pt-2 pb-3 text-center text-4xl font-bold text-black md:text-7xl dark:text-white',        '[background:linear-gradient(to_bottom,#f3f4f6,#e5e7eb)]',        'shadow-[inset_0_-1px_#d1d5db,inset_0_0_0_1px_#d1d5db,_0_4px_8px_#d1d5db]',        'dark:[background:linear-gradient(to_bottom,#374151,#1f2937)]',        'dark:shadow-[inset_0_-1px_#10171e,inset_0_0_0_1px_hsla(205,89%,46%,.24),_0_4px_8px_#00000052]',        className,      )}      key={words[currentWordIndex]}    >      <motion.div        transition={{          duration: animationDuration / 1000,          ease: 'easeInOut',        }}        className={cn('inline-block', textClassName)}        ref={textRef}        layoutId={`word-div-${words[currentWordIndex]}-${id}`}      >        <motion.div className="inline-block">          {words[currentWordIndex].split('').map((letter, index) => (            <motion.span              key={index}              initial={{                opacity: 0,                filter: 'blur(10px)',              }}              animate={{                opacity: 1,                filter: 'blur(0px)',              }}              transition={{                delay: index * 0.02,              }}            >              {letter}            </motion.span>          ))}        </motion.div>      </motion.div>    </motion.div>  );}

Built with TypeScript and Motion for React applications, featuring layout animations and intelligent width calculations. Each word change triggers a smooth container resize followed by letter-by-letter blur-to-focus reveals, creating professional text transitions.

Installation

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

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

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

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

Usage

import { ContainerTextFlip } from "@/components/text/container-text-flip";

<ContainerTextFlip
  words={["better", "modern", "awesome", "beautiful"]}
  interval={3000}
  animationDuration={700}
  className="text-6xl"
/>;

Why most text cycling components suck

Most developers just swap words instantly or use basic CSS transitions that ignore container width. The result is jarring layout shifts where content jumps around as words change length. Short words like "is" suddenly become "extraordinary", causing the entire layout to reflow awkwardly.

This React component uses Motion's layout animations to smoothly transition container width based on the incoming word. It measures each word's width dynamically, then animates the container to the new dimensions before revealing letters with staggered blur effects. The container styling includes subtle gradients and shadows that maintain visual consistency during transitions.

The key insight: width transitions should happen before content changes, not during. Users see a smooth resize followed by the new word appearing letter by letter, creating a polished, intentional feel instead of chaotic layout shifts.

Features

• Dynamic width animations that resize smoothly before word transitions in React applications
• Letter-by-letter reveals with blur-to-focus effects using Motion's stagger animations
• Configurable timing for interval cycling and animation duration control
• Built-in container styling with gradients, shadows, and dark mode support
• Complete TypeScript support with full interface definitions and prop validation
• Layout stability with proper width calculations and padding management
• Free open source component compatible with Next.js and shadcn/ui design systems

API Reference

ContainerTextFlip

Animated text container with smooth word cycling and dynamic width transitions.

Optimal Animation Timing

Balance smooth transitions with user engagement:

Container Styling

Built-in styles with theme support:

Common gotchas

Container width jumps unexpectedly: Default padding adds 30px (15px each side) for visual breathing room in React applications. Very short words might cause width fluctuations. Adjust padding or use min-width CSS for consistency in TypeScript projects.

Letters appear too slowly: Default 0.02s delay between letters works for most words in JavaScript applications. For longer words (10+ characters), reduce to 0.01s for faster reveals. For dramatic effect, increase to 0.05s in Next.js projects.

Animation feels sluggish: Default 700ms duration balances smoothness with responsiveness in React applications. For snappier transitions, reduce to 400-500ms. For more deliberate reveals, increase to 900-1000ms in TypeScript projects.

Layout shifts still occur: The component measures width after DOM updates in JavaScript applications. Ensure parent containers have sufficient space or use CSS min-width to prevent external layout shifts in React projects.

Dark mode styling issues: Built-in dark mode uses CSS custom properties and Tailwind classes in TypeScript applications. Verify your theme configuration supports the dark: prefix for proper styling in Next.js projects.

Integration with other components

Perfect for hero sections in Card layouts or dynamic headlines in Badge components within React applications. Works excellently with Button components for action-oriented cycling text in Next.js projects.

For marketing interfaces, combine with Progress indicators or Tabs for section-based content cycling. This TypeScript component pairs well with Avatar for role-based text changes and Dialog for dynamic modal titles, all with seamless shadcn/ui integration.

Questions developers actually ask