"use client";

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

const WORDS = ["faster", "calmer", "sharper", "bolder"];
const COLORS = ["#2A3D2F", "#6366f1", "#ec4899", "#f59e0b"];

export function WordFlip() {
  const [i, setI] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setI((v) => (v + 1) % WORDS.length), 1800);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="grid min-h-[240px] place-items-center bg-[#FAFAF8] p-16">
      <h2
        className="flex flex-wrap items-baseline justify-center gap-x-3 leading-[1] tracking-[-0.02em] text-[#111111]"
        style={{
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: "clamp(34px, 5vw, 60px)",
        }}
      >
        <span>Build</span>
        <span className="relative inline-grid h-[1.1em] overflow-hidden text-left">
          {/* width spacer keeps layout stable on the longest word */}
          <span className="invisible col-start-1 row-start-1 italic">sharper</span>
          <AnimatePresence mode="popLayout">
            <motion.span
              key={i}
              initial={{ y: "100%", opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              exit={{ y: "-100%", opacity: 0 }}
              transition={{ duration: 0.5, ease: [0.2, 0.7, 0.2, 1] }}
              className="col-start-1 row-start-1 italic"
              style={{ color: COLORS[i] }}
            >
              {WORDS[i]}
            </motion.span>
          </AnimatePresence>
        </span>
        <span>every week.</span>
      </h2>
    </div>
  );
}
Word Flip

Buildsharperfasterevery week.

Dependencies
