Gradient Mesh

/* Add to globals.css:
@keyframes gradient-pan {
  0% { background-position: 120% 0%; }
  100% { background-position: -120% 0%; }
}
*/
export function GradientMesh({ children }: { children?: React.ReactNode }) {
  return (
    <div className="relative overflow-hidden rounded-2xl bg-neutral-950">
      <div
        aria-hidden="true"
        className="absolute inset-0 bg-[length:200%_200%] motion-safe:[animation:gradient-pan_10s_ease-in-out_infinite]"
        style={{
          backgroundImage:
            "radial-gradient(40% 55% at 20% 30%, rgba(245,158,11,0.3) 0%, transparent 65%), radial-gradient(45% 60% at 80% 20%, rgba(109,40,217,0.22) 0%, transparent 70%), radial-gradient(50% 60% at 60% 90%, rgba(245,158,11,0.16) 0%, transparent 70%)",
        }}
      />
      <div className="relative">{children}</div>
    </div>
  );
}