"use client";

export function GradientSweep() {
  return (
    <div className="bg-[#FAFAF8] p-16 grid place-items-center min-h-[260px]">
      <h2
        className="text-center tracking-[-0.025em] leading-[1.0]"
        style={{
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: "clamp(40px, 6vw, 80px)",
          backgroundImage:
            "linear-gradient(90deg, #111111 0%, #111111 40%, #2A3D2F 50%, #111111 60%, #111111 100%)",
          backgroundSize: "200% 100%",
          WebkitBackgroundClip: "text",
          backgroundClip: "text",
          color: "transparent",
          animation: "sweep 4.5s ease-in-out infinite",
        }}
      >
        Shipping <span style={{ fontStyle: "italic" }}>quietly.</span>
      </h2>
      <style>{`
        @keyframes sweep {
          0%   { background-position: 100% 0; }
          50%  { background-position: 0% 0; }
          100% { background-position: -100% 0; }
        }
      `}</style>
    </div>
  );
}
Gradient Sweep

Shipping quietly.
