Rotating Words Headline

"use client";

import { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";

const words = ["bolder", "faster", "smarter", "kinder", "brighter"];

export default function TextRotatingWords() {
  const reduce = useReducedMotion();
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setIndex((i) => (i + 1) % words.length);
    }, 2200);
    return () => clearInterval(id);
  }, []);

  const enter = reduce
    ? { opacity: 0 }
    : { opacity: 0, y: "100%", filter: "blur(8px)" };
  const exit = reduce
    ? { opacity: 0 }
    : { opacity: 0, y: "-100%", filter: "blur(8px)" };

  return (
    <section className="relative flex min-h-[80vh] items-center justify-center overflow-hidden bg-zinc-50 px-6 py-24 dark:bg-zinc-950">
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_50%_35%,rgba(139,92,246,0.12),transparent_55%)]"
      />

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.5 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        className="mx-auto max-w-3xl text-center"
      >
        <span className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white/70 px-4 py-1.5 text-sm font-medium text-zinc-600 shadow-sm backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70 dark:text-zinc-300">
          <span className="h-2 w-2 rounded-full bg-violet-500" />
          Rotating words
        </span>

        <h2 className="mt-8 text-4xl font-bold tracking-tight text-zinc-900 sm:text-6xl lg:text-7xl dark:text-white">
          Build something
          <span className="relative mx-auto mt-2 flex h-[1.15em] items-center justify-center overflow-hidden">
            <AnimatePresence mode="wait" initial={false}>
              <motion.span
                key={words[index]}
                initial={enter}
                animate={{ opacity: 1, y: "0%", filter: "blur(0px)" }}
                exit={exit}
                transition={{ duration: 0.5, ease: "easeOut" }}
                className="absolute bg-gradient-to-r from-indigo-500 via-violet-500 to-fuchsia-500 bg-clip-text text-transparent dark:from-indigo-400 dark:via-violet-400 dark:to-fuchsia-400"
              >
                {words[index]}
              </motion.span>
            </AnimatePresence>
            <span className="invisible" aria-hidden="true">
              {words.reduce((a, b) => (a.length > b.length ? a : b))}
            </span>
          </span>
        </h2>

        <p className="sr-only" aria-live="polite">
          Build something {words[index]}
        </p>

        <p className="mx-auto mt-6 max-w-xl text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">
          One headline, endless personalities. The final word flips through a
          curated set while the rest of the line stays perfectly still.
        </p>

        <div className="mt-8 flex items-center justify-center gap-2" aria-hidden="true">
          {words.map((w, i) => (
            <span
              key={w}
              className={`h-1.5 rounded-full transition-all duration-300 ${
                i === index
                  ? "w-6 bg-violet-500"
                  : "w-1.5 bg-zinc-300 dark:bg-zinc-700"
              }`}
            />
          ))}
        </div>
      </motion.div>
    </section>
  );
}