Tracking In

"use client";

import { motion, useReducedMotion } from "motion/react";

export interface TrackingInProps {
  text?: string;
  as?: "h1" | "h2" | "p";
  className?: string;
}

/** Headline whose letter-spacing contracts from very wide to the tight display tracking while fading in — a calm, precise entrance for short words. */
export function TrackingIn({ text = "Framed.", as = "h2", className }: TrackingInProps) {
  const reduce = useReducedMotion();
  const Tag = motion[as];
  return (
    <Tag
      className={className}
      initial={reduce ? false : { letterSpacing: "0.4em", opacity: 0 }}
      whileInView={{ letterSpacing: "-0.04em", opacity: 1 }}
      viewport={{ once: true, amount: 0.6 }}
      transition={{ duration: 1.2, ease: [0.2, 0.8, 0.2, 1] }}
    >
      {text}
    </Tag>
  );
}

export default TrackingIn;