Beams Background

/* Add to globals.css:
@keyframes beam-fall {
  from { transform: translateY(-4rem); opacity: 0; }
  30%, 70% { opacity: 1; }
  to { transform: translateY(14rem); opacity: 0; }
}
*/
export function BeamsBackground({ children }: { children?: React.ReactNode }) {
  return (
    <div className="relative overflow-hidden rounded-2xl bg-neutral-950">
      {[18, 50, 82].map((left, i) => (
        <span
          key={left}
          aria-hidden="true"
          className="absolute inset-y-0 w-px bg-neutral-800"
          style={{ left: left + "%" }}
        >
          <span
            className="absolute inset-x-0 h-16 bg-gradient-to-b from-transparent via-amber-500 to-transparent motion-safe:[animation:beam-fall_3.2s_ease-in-out_infinite]"
            style={{ animationDelay: i * 800 + "ms" }}
          />
        </span>
      ))}
      <div className="relative">{children}</div>
    </div>
  );
}