Background Polkadot Animasi

Ini adalah komponen latar belakang yang menggunakan radial-gradient CSS untuk menggambar pola polkadot yang ringan dan bersih. Itu tidak menggunakan gambar apa pun, sehingga memuat dengan cepat dan dapat disesuaikan sepenuhnya.

Kasus & Fitur Penggunaan

• Bagian LP dan hero: Sebagai background visual utama, tambahkan gerakan yang tidak terlalu overpower untuk memberikan kesan modern.
• Latar belakang untuk kartu dan modal: Sempurna sebagai aksen saat Anda bosan dengan latar belakang satu warna yang sederhana.
• Kinerja: Karena diselesaikan hanya dengan CSS tanpa memuat gambar (SVG atau PNG), hal ini tidak berdampak negatif pada LCP (Largest Contentful Paint).

Poin-poin penting dari desain dan UX (Desain & UX)

• Animasi halus: Gunakan transform untuk bergerak perlahan secara diagonal guna menghadirkan kedalaman dan ritme pada halaman statis.
• Efek vinyet: Polanya terlihat jelas di tengah, dan overlay (radial-gradient) yang menyatu dengan warna latar belakang ke arah tepi meningkatkan visibilitas teks dan konten yang ditempatkan di atas.
• Kompatibel dengan mode gelap: Dirancang untuk mengganti warna latar belakang dan warna titik secara mulus dengan memanfaatkan kelas :global(.dark) dan kueri media.

Cara menyesuaikan (Panduan Kustomisasi)

Anda dapat dengan mudah menyesuaikan ukuran dan jarak titik hanya dengan mengubah variabel CSS.

• --dot-size: radius titik (misalnya 2px akan membuatnya lebih besar)
• --dot-space: Spasi antar titik (misalnya 32px mengurangi kepadatan)
• --dot-color-light / --dot-color-dark: Mengubah warna titik. Kami menyarankan memilih warna terang yang sesuai dengan warna tema Anda.

Kode implementasi (Implementasi)

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

Dukungan Peramban

Didukung sepenuhnya di semua browser modern (Chrome, Firefox, Safari, Edge). Karena dianimasikan menggunakan transform yang dipercepat GPU, ia bekerja dengan sangat lancar bahkan saat menggulir atau melakukan pemrosesan berat lainnya.