FreeText Effects

Container Text Flip

Use this component in hero headlines and feature sections when you want to rotate through value props without causing layout shifts.

ReactTailwind CSSMotionText

Make itbeautiful

Overview

A word-flip text effect that animates inside a stable highlighted container.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<ContainerTextFlip />

Container Text Flip.tsx

tsx

"use client";

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

const words = ["beautiful", "useful", "fast", "polished"];

export function ContainerTextFlip() {
  const [index, setIndex] = useState(0);

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

  return (
    <div className="flex flex-wrap items-center justify-center gap-3 text-center text-4xl font-black text-white">
      Make it
      <span className="relative inline-flex min-w-44 justify-center overflow-hidden rounded-lg border border-white/10 bg-white/[0.06] px-4 py-2 text-lime-300">
        <AnimatePresence mode="wait">
          <motion.span
            key={words[index]}
            initial={{ y: 28, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: -28, opacity: 0 }}
            transition={{ duration: 0.28 }}
          >
            {words[index]}
          </motion.span>
        </AnimatePresence>
      </span>
    </div>
  );
}