Flip Words

text

Smooth staggered word flipper for headings and landing banners.

#text#words#flip#landing

Live Interactive Preview

Crafting web apps that areextraordinary

Component Source Code

Select language in the dropdown

FlipWords.tsx

1'use client';
2
3import React, { useState, useEffect } from 'react';
4
5export default function FlipWords() {
6  const words = ['extraordinary', 'seamless', 'blazing-fast', 'futuristic', 'delightful'];
7  const [index, setIndex] = useState(0);
8
9  useEffect(() => {
10    const interval = setInterval(() => {
11      setIndex((prev) => (prev + 1) % words.length);
12    }, 2200);
13    return () => clearInterval(interval);
14  }, [words.length]);
15
16  return (
17    <div className="flex flex-wrap items-center justify-center p-6 text-center text-xl sm:text-3xl font-extrabold text-slate-900 dark:text-white">
18      <span>Crafting web apps that are</span>
19      <span className="relative ml-2 inline-block px-3 py-1 text-blue-600 dark:text-cyan-400 bg-blue-500/10 dark:bg-cyan-500/10 rounded-xl border border-blue-500/20 dark:border-cyan-500/20 shadow-xs animate-[flipIn_0.5s_ease-out]">
20        {words[index]}
21      </span>
22    </div>
23  );
24}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/text/FlipWords.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import FlipWords from '@/components/text/FlipWords';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <FlipWords />
7    </main>
8  );
9}