React Flip Words

Powered by

Motion

Most word cycling animations just swap text instantly or use basic fades that feel cheap. Users see the same boring crossfade between words, making dynamic content feel static and predictable. This component cycles through words with letter-by-letter reveals and dramatic exit animations—each word builds itself character by character before exploding off the screen with blur and scale effects.

Dynamic word cycling with letter animations

Words that build themselves letter by letter, then dramatically exit:

import { FlipWords } from '@/components/ui/shadcn-io/flip-words';const words = ['better', 'faster', 'modern', 'beautiful'];const FlipWordsDemo = () => {  return (    <div className="flex justify-center items-center p-8">      <div className="text-4xl font-normal text-center max-w-2xl">        Build{' '}        <FlipWords           words={words}           duration={2500}          className="text-blue-500 font-semibold"        />{' '}        websites with shadcn/ui      </div>    </div>  );};export default FlipWordsDemo;

'use client';import * as React from 'react';import { AnimatePresence, motion } from 'motion/react';import { cn } from '@/lib/utils';type FlipWordsProps = Omit<React.ComponentProps<'span'>, 'children'> & {  words: string[];  duration?: number;  letterDelay?: number;  wordDelay?: number;};function FlipWords({  ref,  words,  duration = 3000,  letterDelay = 0.05,  wordDelay = 0.3,  className,  ...props}: FlipWordsProps) {  const localRef = React.useRef<HTMLSpanElement>(null);  React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);  const [currentWord, setCurrentWord] = React.useState(words[0]);  const [isAnimating, setIsAnimating] = React.useState<boolean>(false);  const startAnimation = React.useCallback(() => {    const word = words[words.indexOf(currentWord) + 1] || words[0];    setCurrentWord(word);    setIsAnimating(true);  }, [currentWord, words]);  React.useEffect(() => {    if (!isAnimating) {      const timeoutId = setTimeout(() => {        startAnimation();      }, duration);      return () => clearTimeout(timeoutId);    }  }, [isAnimating, duration, startAnimation]);  return (    <span ref={localRef} data-slot="flip-words" {...props}>      <AnimatePresence        onExitComplete={() => {          setIsAnimating(false);        }}      >        <motion.span          initial={{            opacity: 0,            y: 10,          }}          animate={{            opacity: 1,            y: 0,          }}          transition={{            type: 'spring',            stiffness: 100,            damping: 10,          }}          exit={{            opacity: 0,            y: -40,            x: 40,            filter: 'blur(8px)',            scale: 2,            position: 'absolute',          }}          className={cn(            'inline-block relative text-left px-2 will-change-transform will-change-opacity will-change-filter',            className          )}          key={currentWord}        >          {currentWord.split(' ').map((word, wordIndex) => (            <motion.span              key={`${word}-${wordIndex}`}              initial={{ opacity: 0, y: 10, filter: 'blur(8px)' }}              animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}              transition={{                delay: wordIndex * wordDelay,                duration: 0.3,              }}              className="inline-block whitespace-nowrap"            >              {word.split('').map((letter, letterIndex) => (                <motion.span                  key={`${word}-${letterIndex}`}                  initial={{ opacity: 0, y: 10, filter: 'blur(8px)' }}                  animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}                  transition={{                    delay: wordIndex * wordDelay + letterIndex * letterDelay,                    duration: 0.2,                  }}                  className="inline-block will-change-transform will-change-opacity will-change-filter"                >                  {letter}                </motion.span>              ))}              <span className="inline-block">&nbsp;</span>            </motion.span>          ))}        </motion.span>      </AnimatePresence>    </span>  );}export { FlipWords, type FlipWordsProps };

Built with TypeScript and Motion for React applications, using staggered letter animations and spring physics for natural movement. Each word appears with progressive blur-to-focus reveals, creating that satisfying "typing into existence" effect that keeps users watching.

Installation

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

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

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

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

Usage

import { FlipWords } from "@/components/text/flip-words";

const words = ["better", "faster", "modern", "beautiful"];

<FlipWords
  words={words}
  duration={3000}
  letterDelay={0.05}
  wordDelay={0.3}
/>;

Why most word cycling effects suck

Most developers just use CSS transitions or simple opacity swaps between words. The result feels mechanical—words appear and disappear without personality or visual interest. Users quickly tune out because there's no progression to watch, no buildup to anticipate.

This React component uses Motion's AnimatePresence with dramatic exit animations. Words don't just fade out—they blur, scale up, and slide away like they're being launched off the page. Meanwhile, incoming words build themselves letter by letter with staggered timing, creating that satisfying typewriter effect.

The key insight: users are drawn to progressive reveals. When letters appear one by one, people wait to see the complete word. The dramatic exit ensures the old word doesn't just disappear—it makes space for the new word with style. Spring physics make everything feel natural instead of robotic.

Features

• Letter-by-letter word cycling with staggered character animations for React applications
• Dramatic exit effects with blur, scale, and position transforms
• Configurable timing for letter delays, word delays, and cycling duration
• Spring-based physics for natural movement and smooth transitions
• Complete TypeScript support with customizable animation parameters
• Performance optimized with AnimatePresence for efficient component mounting
• Free open source component compatible with Next.js and shadcn/ui design systems

API Reference

FlipWords

Animated word cycling component with letter-by-letter reveals and exit effects.

Optimal Cycling Speeds

Timing that maintains user engagement:

Animation Timing Patterns

Choose the right reveal feel:

Common gotchas

Letters appear too fast: Default 0.05s delay works for most words in React applications. For longer words or dramatic effect, increase to 0.08-0.1s for better letter visibility in TypeScript projects.

Word cycling feels rushed: Default 3000ms gives users time to read and process each word in JavaScript applications. For complex terms or slower reading contexts, increase to 4000-5000ms in Next.js projects.

Exit animation too dramatic: The blur and scale exit creates visual interest but might be intense for some contexts in React applications. The component uses optimized transforms for smooth performance across devices in TypeScript projects.

Multiple words per cycle: The component handles multi-word strings by splitting on spaces and animating each word separately with staggered timing. Single words create the smoothest effect for this animation style.

Animation doesn't restart: The cycling continues automatically in JavaScript applications. To pause or restart, you'd need to manage the component's key prop or implement custom state control in React projects.

Integration with other components

Perfect for hero sections in Card layouts or dynamic branding in Badge components within React applications. Works excellently with Button hover states for interactive call-to-action cycling in Next.js projects.

For landing pages, combine with Progress indicators or Tabs for section-based word cycling. This TypeScript component pairs well with Avatar for role cycling and Dialog title variations, all with seamless shadcn/ui integration.

Questions developers actually ask