Animierter Polkadot-Hintergrund

Dies ist eine Hintergrundkomponente, die den „radialen Farbverlauf“ von CSS verwendet, um ein leichtes und sauberes Tupfenmuster zu zeichnen. Da es keine Bilder verwendet, wird es schnell geladen und ist vollständig anpassbar.

Anwendungsfälle und Funktionen

• LP- und Heldenbereich: Fügen Sie als Hintergrund des Hauptvisuals eine Bewegung hinzu, die nicht zu aufdringlich ist, um einen modernen Eindruck zu vermitteln.
• Hintergrund für Karten und Modalitäten: Perfekt als Akzent, wenn Sie einen einfachen, einfarbigen Hintergrund satt haben.
• Leistung: Da es nur mit CSS abgeschlossen wird, ohne Bilder (SVG oder PNG) zu laden, hat es keine negativen Auswirkungen auf LCP (Largest Contentful Paint).

Kernpunkte von Design und UX (Design & UX)

• Subtile Animation: Verwenden Sie „Transformieren“, um sich langsam diagonal zu bewegen und einer statischen Seite Tiefe und Rhythmus zu verleihen.
• Vignetteneffekt: Das Muster ist in der Mitte deutlich sichtbar, und eine Überlagerung („radialer Farbverlauf“), die zu den Rändern hin in die Hintergrundfarbe übergeht, erhöht die Sichtbarkeit von darüber platziertem Text und Inhalt.
• Kompatibel mit dem Dunkelmodus: Entwickelt, um die Hintergrundfarbe und Punktfarbe nahtlos zu wechseln, indem die Klasse „:global(.dark)“ und Medienabfragen verwendet werden.

So passen Sie es an (Anpassungsanleitung)

Sie können die Größe und den Abstand der Punkte ganz einfach anpassen, indem Sie einfach CSS-Variablen ändern.

• „—dot-size“: Punktradius (z. B. „2px“ vergrößert ihn)
• „—dot-space“: Abstand zwischen Punkten (z. B. „32px“ reduziert die Dichte)
• „—dot-color-light“ / „—dot-color-dark“: Ändern Sie die Punktfarbe. Wir empfehlen, eine helle Farbe zu wählen, die zu Ihrer Themenfarbe passt.

Implementierungscode (Implementierung)

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

Browser-Unterstützung

Vollständig unterstützt auf allen modernen Browsern (Chrome, Firefox, Safari, Edge). Da die Animation mithilfe einer GPU-beschleunigten „Transformation“ erfolgt, funktioniert sie auch beim Scrollen oder anderen schweren Verarbeitungsvorgängen sehr reibungslos.