SnapOtter/apps/landing/src/components/typing-cursor.tsx

"use client";

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

const phrases = [
  "No signups. No accounts.",
  "100% local processing.",
  "Unlimited use. Forever free.",
  "Works fully offline.",
  "Zero data leaves your network.",
  "50+ image tools.",
  "14 AI models. Your hardware.",
  "Air-gapped ready.",
  "One Docker container.",
  "Open source. Always.",
];

export function TypingCursor() {
  const [index, setIndex] = useState(0);

  const advance = useCallback(() => {
    setIndex((i) => (i + 1) % phrases.length);
  }, []);

  useEffect(() => {
    const timer = setInterval(advance, 3000);
    return () => clearInterval(timer);
  }, [advance]);

  return (
    <AnimatePresence mode="wait">
      <motion.span
        key={phrases[index]}
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -10 }}
        transition={{ duration: 0.3 }}
        className="text-accent"
      >
        {phrases[index]}
      </motion.span>
    </AnimatePresence>
  );
}