Dot Grid Field

// Keyframes cannot be expressed as Tailwind utilities, so they live in a style element.
const css = `
@keyframes dot-grid-pulse {
  from { opacity: 0.6; }
  to { opacity: 1; }
}
`;

const MASK = 'radial-gradient(ellipse at center, black 40%, transparent 75%)';

// The dots are one tiled radial gradient, and the mask is what makes the
// field feel infinite: it dissolves before it can hit an edge.
const dotsStyle: React.CSSProperties = {
  backgroundImage: 'radial-gradient(rgba(200,169,106,0.5) 1px, transparent 1px)',
  backgroundSize: '24px 24px',
  WebkitMaskImage: MASK,
  maskImage: MASK,
  animation: 'dot-grid-pulse 4s ease-in-out alternate infinite',
};

export function DotGridField() {
  return (
    <div className="relative h-full min-h-[220px] w-full overflow-hidden bg-[#0e0f11]">
      <style>{css}</style>
      <span aria-hidden="true" style={dotsStyle} className="absolute inset-0" />
    </div>
  );
}