Word Rotate

Motion

Dynamic Tailwind word rotate and Tailwind CSS text cycle animation components that flip through phrases in 3D space.

On this page

Implementation Usage Inline Word Rotate Standalone Status Props

Maximize your screen real estate with a Tailwind word rotate component. This Tailwind CSS text cycle animation continuously flips through a series of words or phrases on an engaging 3D axis, allowing you to showcase multiple capabilities in a single line.

Word rotations are highly effective in a Hero section headline, easily catching the eye without requiring the user to do any reading.

Implementation

"use client";

import React, { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";

interface WordRotateProps {
  words: string[];
  className?: string;
  interval?: number;
}

export const WordRotate: React.FC<WordRotateProps> = ({
  words, className = "", interval = 2500,
}) => {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setIndex((prev) => (prev + 1) % words.length);
    }, interval);
    return () => clearInterval(timer);
  }, [words.length, interval]);

  return (
    <span className={`inline-flex overflow-hidden ${className}`}>
      <AnimatePresence mode="wait">
        <motion.span key={words[index]}
          initial={{ rotateX: 90, opacity: 0 }}
          animate={{ rotateX: 0, opacity: 1 }}
          exit={{ rotateX: -90, opacity: 0 }}
          transition={{ duration: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
          className="inline-block"
          style={{ perspective: "500px" }}>
          {words[index]}
        </motion.span>
      </AnimatePresence>
    </span>
  );
};

Usage

Inline Word Rotate

We make it simple

<p>We make it <WordRotate words={["simple", "fast", "elegant"]} /></p>

Standalone Status

Currently

Designing systems

<p className="uppercase text-sm">Currently</p>
<WordRotate
  words={["Designing systems", "Writing code", "Shipping features"]}
  interval={2000}
/>

Props

Prop	Type	Default	Description
`words`	`string[]`	—	Array of words to rotate through
`className`	`string`	`""`	Additional CSS classes
`interval`	`number`	`2500`	Time between rotations (ms)

Text Shimmer

Dock