Background Polka Dot Animado

Este é um componente de fundo que usa o radial-gradient do CSS para desenhar um padrão de bolinhas leve e limpo. Ele não usa imagens, por isso carrega rapidamente e é totalmente personalizável.

Casos de uso e recursos

• LP e seção de herói: Como pano de fundo do visual principal, adicione um movimento que não seja muito forte para dar uma impressão moderna.
• Plano de fundo para cartões e modais: Perfeito como destaque quando você está cansado de um fundo simples e de uma só cor.
• Desempenho: Por ser concluído apenas com CSS sem carregar imagens (SVG ou PNG), não impacta negativamente no LCP (Largest Contentful Paint).

Pontos-chave de design e UX (Design & UX)

• Animação sutil: Use transform para mover lentamente na diagonal para trazer profundidade e ritmo a uma página estática.
• Efeito vinheta: O padrão é claramente visível no centro, e uma sobreposição (radial-gradient) que se mistura com a cor de fundo em direção às bordas aumenta a visibilidade do texto e do conteúdo colocado acima.
• Compatível com o modo escuro: Projetado para alternar perfeitamente a cor de fundo e a cor dos pontos, utilizando a classe :global(.dark) e consultas de mídia.

Como personalizar (Guia de Personalização)

Você pode ajustar facilmente o tamanho e o espaçamento dos pontos simplesmente alterando as variáveis CSS.

• --dot-size: raio do ponto (por exemplo, 2px o tornará maior)
• --dot-space: Espaço entre pontos (por exemplo, 32px reduz a densidade)
• --dot-color-light / --dot-color-dark: Altera a cor do ponto. Recomendamos escolher uma cor clara que corresponda à cor do seu tema.

Código de implementação (Implementação)

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>
);
};

Suporte ao navegador

Totalmente compatível com todos os navegadores modernos (Chrome, Firefox, Safari, Edge). Como é animado usando transform acelerada por GPU, ele funciona muito bem mesmo ao rolar ou realizar outro processamento pesado.