Background à pois animés

Il s’agit d’un composant d’arrière-plan qui utilise le « radial-gradient » de CSS pour dessiner un motif à pois léger et propre. Il n’utilise aucune image, il se charge donc rapidement et est entièrement personnalisable.

Cas d’utilisation et fonctionnalités

• Section LP et héros : Comme arrière-plan du visuel principal, ajoutez un mouvement qui n’est pas trop écrasant pour donner une impression moderne.
• Arrière-plan pour cartes et modaux : Parfait comme accent lorsque vous en avez assez d’un arrière-plan simple et monochrome.
• Performance : Puisqu’il est complété uniquement avec du CSS sans charger d’images (SVG ou PNG), il n’a pas d’impact négatif sur le LCP (Largest Contentful Paint).

Points clés du design et de l’UX (Design & UX)

• Animation subtile : utilisez « transformer » pour vous déplacer lentement en diagonale afin d’apporter de la profondeur et du rythme à une page statique.
• Effet vignette : Le motif est clairement visible au centre, et une superposition (« radial-gradient ») qui se fond dans la couleur d’arrière-plan vers les bords augmente la visibilité du texte et du contenu placés au-dessus.
• Compatible avec le mode sombre : conçu pour changer de manière transparente la couleur d’arrière-plan et la couleur des points en utilisant la classe :global(.dark) et les requêtes multimédias.

Comment personnaliser (Guide de personnalisation)

Vous pouvez facilement ajuster la taille et l’espacement des points en modifiant simplement les variables CSS.

• --dot-size : rayon du point (par exemple, 2px le rendra plus grand)
• --dot-space : Espace entre les points (par exemple, 32px réduit la densité)
• --dot-color-light / --dot-color-dark : Change la couleur des points. Nous vous recommandons de choisir une couleur claire qui correspond à la couleur de votre thème.

Code d’implémentation (Implémentation)

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

Prise en charge du navigateur

Entièrement pris en charge sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Puisqu’il est animé à l’aide d’une « transformation » accélérée par GPU, il fonctionne de manière très fluide même lors du défilement ou de l’exécution d’autres traitements lourds.