Word Loader

"use client";

import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Sparkles, Terminal } from "lucide-react";

export interface WordLoaderProps {
  prefix?: string;
  words?: string[];
  suffix?: string;
  interval?: number;
}

export function WordLoader({
  prefix = "Crafting",
  words = ["compiling components", "synthesizing springs", "optimizing layout"],
  suffix = "...",
  interval = 2200,
}: WordLoaderProps) {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setIndex((prev) => (prev + 1) % words.length);
    }, interval);

    return () => clearInterval(timer);
  }, [words.length, interval]);

  return (
    <div className="inline-flex items-center gap-2 px-4 py-2.5 rounded-2xl bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 shadow-sm text-sm">
      <Terminal className="w-4 h-4 text-zinc-400 shrink-0" />
      <span className="font-medium text-zinc-500">{prefix}</span>
      <div className="relative h-6 min-w-[200px] overflow-hidden flex items-center">
        <AnimatePresence mode="wait">
          <motion.span
            key={words[index]}
            initial={{ y: 20, opacity: 0, filter: "blur(4px)" }}
            animate={{ y: 0, opacity: 1, filter: "blur(0px)" }}
            exit={{ y: -20, opacity: 0, filter: "blur(4px)" }}
            transition={{ type: "spring", stiffness: 400, damping: 28 }}
            className="absolute font-semibold text-zinc-900 dark:text-zinc-100 whitespace-nowrap"
          >
            {words[index]}
          </motion.span>
        </AnimatePresence>
      </div>
      <span className="font-medium text-zinc-400">{suffix}</span>
    </div>
  );
}

<WordLoader
  prefix="Generating"
  words={["neural tokens", "layout tree", "spring physics"]}
  interval={2000}
/>

export interface WordLoaderProps {
  prefix?: string;
  words?: string[];
  suffix?: string;
  interval?: number;
}