Zoom Past

"use client";

import { cn } from "@/lib/utils";
import { AnimatePresence, motion } from "motion/react";
import { EASE_OUT, TEXT, pick, type EffectProps } from "../_text-effects/shared";

// 23 — The current word rushes past the viewer and fades, while the next one
// travels forward from far behind. Both share one grid cell, so they overlap
// without absolute positioning.
const ZOOM_WORDS = ["Come closer", "Even closer", "Right here"];

export function ZoomPast({
  play,
  words = ZOOM_WORDS,
  duration = 0.5,
  exitScale = 2.6,
}: EffectProps & {
  words?: string[];
  /** Seconds for one word to pass and the next to arrive. */
  duration?: number;
  /** How large the old word grows as it rushes past. */
  exitScale?: number;
}) {
  return (
    <div className="grid place-items-center">
      <AnimatePresence initial={false}>
        <motion.p
          key={play}
          className={cn(TEXT, "col-start-1 row-start-1 whitespace-nowrap")}
          initial={{ scale: 0.4, opacity: 0, filter: "blur(2px)" }}
          animate={{ scale: 1, opacity: 1, filter: "blur(0px)" }}
          exit={{ scale: exitScale, opacity: 0, filter: "blur(4px)" }}
          transition={{ duration, ease: EASE_OUT }}
        >
          {pick(words, play)}
        </motion.p>
      </AnimatePresence>
    </div>
  );
}