"use client";

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

const WORDS = ["studios", "builders", "makers", "writers", "founders"];

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

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

  return (
    <div className="bg-[#FAFAF8] p-16 grid place-items-center min-h-[260px]">
      <h2
        className="text-[#111111] tracking-[-0.02em] leading-[1.1] flex flex-wrap gap-x-3 items-baseline"
        style={{
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: "clamp(32px, 4.5vw, 56px)",
        }}
      >
        <span>Built for</span>
        <span
          className="relative overflow-hidden inline-block"
          style={{ height: "1.1em", minWidth: "5ch" }}
        >
          <AnimatePresence mode="wait">
            <motion.span
              key={WORDS[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="inline-block italic"
              style={{ color: "#2A3D2F" }}
            >
              {WORDS[i]}
            </motion.span>
          </AnimatePresence>
        </span>
      </h2>
    </div>
  );
}
Vertical Word Rotator

Built forstudios

Dependencies
