Text

Flip Fade Text

#text#fade#animation

We help you ship Faster.

Built for developers.

implementedInfinityUI component

This component is fully implemented in InfinityUI and wired into the docs and registry flow.

Installation

Use the registry command to add the component source, and install any package dependencies if needed.

Infinity Registry

Install the component source into your project with the shadcn CLI.

npx shadcn@latest add https://infinityui-pearl.vercel.app/r/flip-fade-text

Package Dependencies

Install the npm packages used by this component source.

npm install framer-motion

Component Code

Copy and paste this code into your component file.

tsx

"use client";

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

interface FlipFadeTextProps {
    staticText?: string;
    words: string[];
    className?: string;
    /** Interval in milliseconds. Default: 2000 */
    interval?: number;
}

export function FlipFadeText({
    staticText = "",
    words,
    className = "",
    interval = 2000,
}: FlipFadeTextProps) {
    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 items-center gap-2 ${className}`}>
            {staticText && <span>{staticText}</span>}
            <span className="relative inline-block min-w-[180px]">
                <AnimatePresence mode="wait">
                    <motion.span
                        key={words[index]}
                        initial={{ opacity: 0, y: 20, rotateX: -30 }}
                        animate={{ opacity: 1, y: 0, rotateX: 0 }}
                        exit={{ opacity: 0, y: -20, rotateX: 30 }}
                        transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
                        className="inline-block [transform-style:preserve-3d]"
                    >
                        {words[index]}
                    </motion.span>
                </AnimatePresence>
            </span>
        </span>
    );
}