export function GradientFlowText() {
  return (
    <div className="grid min-h-[240px] place-items-center bg-[#0B0B0F] p-16">
      <div className="text-center">
        <h2
          className="gf-text leading-[0.95] tracking-[-0.02em]"
          style={{
            fontFamily: "'Instrument Serif', Georgia, serif",
            fontSize: "clamp(40px, 7vw, 80px)",
          }}
        >
          Color in motion.
        </h2>
        <p className="mt-5 font-mono text-[10px] uppercase tracking-[0.2em] text-[#FAFAF8]/45">
          animated gradient fill
        </p>
      </div>

      <style>{`
        .gf-text {
          background-image: linear-gradient(
            100deg,
            #6366f1, #8b5cf6, #ec4899, #f59e0b, #06b6d4, #6366f1
          );
          background-size: 250% auto;
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          -webkit-text-fill-color: transparent;
          animation: gf-flow 6s linear infinite;
        }
        @keyframes gf-flow {
          from { background-position: 0% center; }
          to   { background-position: 250% center; }
        }
        @media (prefers-reduced-motion: reduce) {
          .gf-text { animation: none; }
        }
      `}</style>
    </div>
  );
}
Gradient Flow Text

Color in motion.
