Tracking In

"use client";

import { useEffect, useLayoutEffect, useRef } from "react";
import { cn } from "@/lib/utils";

// Size comes from --text-effect-size (default 1.25rem, i.e. text-xl), so a
// preview can enlarge the effect without changing the installed default.
const SIZE = "text-[length:var(--text-effect-size,1.25rem)] leading-[1.2]";

const TEXT = `${SIZE} text-zinc-700 font-light dark:text-zinc-200`;

// Quartic ease-out: each gap starts closing with intent, then glides shut
// over a long, soft tail, so letters land instead of stopping.
const easeOut = (p: number) => 1 - (1 - p) ** 4;

// useLayoutEffect warns during server rendering; the effect only needs the DOM.
const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;

const reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;

type Order = "wave" | "reverse" | "random";

export type TrackingInProps = {
  /** One entry per line. Long lines still wrap; each wrapped row closes on its own. */