Gradient Text

/* Add to globals.css:
@keyframes gradient-pan {
  0% { background-position: 120% 0%; }
  100% { background-position: -120% 0%; }
}
*/
export function GradientText({ children = "Gradient reveal" }) {
  return (
    <p
      className="bg-[length:200%_100%] bg-clip-text text-3xl font-bold text-transparent motion-safe:animate-[gradient-pan_5s_ease-in-out_infinite]"
      style={{
        backgroundImage:
          "linear-gradient(90deg, rgb(250 250 249) 20%, rgb(245 158 11) 50%, rgb(250 250 249) 80%)",
      }}
    >
      {children}
    </p>
  );
}