Đây là thành phần nền sử dụng radial-gradient của CSS để vẽ mẫu chấm bi nhẹ và rõ ràng. Nó không sử dụng bất kỳ hình ảnh nào nên tải nhanh và hoàn toàn có thể tùy chỉnh.

Trường hợp sử dụng & Tính năng

• Phần LP và anh hùng: Làm nền cho hình ảnh chính, thêm chuyển động không quá mạnh để tạo ấn tượng hiện đại.
• Nền cho thẻ và mô-đun: Hoàn hảo làm điểm nhấn khi bạn cảm thấy mệt mỏi với nền đơn sắc, đơn giản.
• Hiệu suất: Vì nó chỉ được hoàn thành bằng CSS mà không tải hình ảnh (SVG hoặc PNG), nên nó không có tác động tiêu cực đến LCP (Largest Contentful Paint).

Những điểm chính của thiết kế và UX (Design & UX)

• Hoạt ảnh tinh tế: Sử dụng transform để di chuyển chậm theo đường chéo nhằm mang lại chiều sâu và nhịp điệu cho một trang tĩnh.
• Hiệu ứng họa tiết: Mẫu hiển thị rõ ràng ở giữa và lớp phủ (radial-gradient) hòa vào màu nền về phía các cạnh giúp tăng khả năng hiển thị của văn bản và nội dung được đặt phía trên.
• Tương thích với chế độ tối: Được thiết kế để chuyển đổi liền mạch màu nền và màu chấm bằng cách sử dụng các truy vấn phương tiện và lớp :global(.dark).

Cách tùy chỉnh (Hướng dẫn tùy chỉnh)

Bạn có thể dễ dàng điều chỉnh kích thước và khoảng cách của các dấu chấm bằng cách thay đổi các biến CSS.

• --dot-size: bán kính chấm (ví dụ: 2px sẽ làm cho nó lớn hơn)
• --dot-space: Khoảng cách giữa các dấu chấm (ví dụ: 32px làm giảm mật độ)
• --dot-color-light / --dot-color-dark: Thay đổi màu chấm. Chúng tôi khuyên bạn nên chọn màu sáng phù hợp với màu chủ đề của bạn.

Mã triển khai (Implementation)

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

Hỗ trợ trình duyệt

Hỗ trợ đầy đủ trên tất cả các trình duyệt hiện đại (Chrome, Firefox, Safari, Edge). Vì nó được tạo hoạt ảnh bằng cách sử dụng transform được tăng tốc GPU nên nó hoạt động rất mượt mà ngay cả khi cuộn hoặc thực hiện các xử lý nặng khác.