Word Rotate

Motion

Free, copy-pasteable Tailwind CSS & Framer Motion Word Rotate component. Accessible, fully responsive, dark-mode ready, and customizable.

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