Este es un componente de fondo que utiliza el “gradiente radial” de CSS para dibujar un patrón de lunares limpio y liviano. No utiliza imágenes, por lo que se carga rápidamente y es totalmente personalizable.

Casos de uso y características

• Sección LP y héroe: como fondo de la imagen principal, agrega un movimiento que no sea demasiado abrumador para dar una impresión moderna.
• Fondo para tarjetas y modales: perfecto como acento cuando estás cansado de un fondo simple y de un solo color.
• Rendimiento: Dado que se completa solo con CSS sin cargar imágenes (SVG o PNG), no tiene un impacto negativo en LCP (Largest Contentful Paint).

Puntos claves del diseño y UX (Design & UX)

• Animación sutil: utilice “transformar” para moverse lentamente en diagonal y aportar profundidad y ritmo a una página estática.
• Efecto viñeta: el patrón es claramente visible en el centro y una superposición (“gradiente radial”) que se mezcla con el color de fondo hacia los bordes aumenta la visibilidad del texto y el contenido colocado encima.
• Compatible con el modo oscuro: Diseñado para cambiar sin problemas el color de fondo y el color de los puntos utilizando la clase :global(.dark) y consultas de medios.

Cómo personalizar (Guía de personalización)

Puede ajustar fácilmente el tamaño y el espaciado de los puntos simplemente cambiando las variables CSS.

• --dot-size: radio del punto (por ejemplo, 2px lo hará más grande)
• --dot-space: espacio entre puntos (por ejemplo, 32px reduce la densidad)
• --dot-color-light / --dot-color-dark: Cambia el color del punto. Recomendamos elegir un color claro que combine con el color de su tema.

Código de implementación (Implementación)

export const PolkaDotBackground: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
return (
  <div className="polka-container relative w-full min-h-[400px] flex items-center justify-center overflow-hidden bg-slate-50 dark:bg-slate-950">
    {/* Polka Dot Pattern */}
    <div className="polka-dots absolute inset-0"></div>
    
    {/* Vignette Overlay */}
    <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(248,250,252,0.85)_100%)] dark:bg-[radial-gradient(circle_at_center,transparent_0%,rgba(2,6,23,0.85)_100%)]"></div>
    
    {/* Content */}
    <div className="relative z-10">
      {children}
    </div>
  </div>
);
};

Soporte del navegador

Totalmente compatible con todos los navegadores modernos (Chrome, Firefox, Safari, Edge). Dado que está animado mediante una “transformación” acelerada por GPU, funciona muy bien incluso cuando se desplaza o realiza otros procesamientos pesados.