Анимированный фон в горошек

Это фоновый компонент, который использует радиальный градиент CSS для рисования легкого и чистого узора в горошек. Он не использует никаких изображений, поэтому загружается быстро и полностью настраивается.

Варианты использования и возможности

• LP и раздел героев: в качестве фона основного изображения добавьте движение, которое не будет слишком подавляющим и не создаст современного впечатления.
• Фон для карточек и модальных окон: идеально подходит в качестве акцента, если вам надоел простой одноцветный фон.
• Производительность: поскольку он выполняется только с помощью CSS без загрузки изображений (SVG или PNG), он не оказывает негативного влияния на LCP (Largest Contentful Paint).

##Ключевые моменты дизайна и UX (Design & UX) – Тонкая анимация: используйте функцию «Трансформация», чтобы медленно перемещаться по диагонали, чтобы придать статической странице глубину и ритм.

• Эффект виньетки: узор четко виден в центре, а наложение («радиальный градиент»), которое сливается с цветом фона по направлению к краям, повышает видимость текста и содержимого, размещенного выше.
• Совместимость с темным режимом: предназначен для плавного переключения цвета фона и цвета точек с помощью класса :global(.dark) и медиа-запросов.

Как настроить (Руководство по настройке)

Вы можете легко настроить размер и расстояние между точками, просто изменив переменные CSS.

• --dot-size: радиус точки (например, 2px сделает ее больше)
• --dot-space: расстояние между точками (например, 32px уменьшает плотность)
• --dot-color-light / --dot-color-dark: изменить цвет точки. Мы рекомендуем выбрать светлый цвет, соответствующий цвету вашей темы.

Код реализации (Реализация)

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

Поддержка браузера

Полностью поддерживается во всех современных браузерах (Chrome, Firefox, Safari, Edge). Поскольку он анимируется с использованием «преобразования» с ускорением на графическом процессоре, он работает очень плавно даже при прокрутке или выполнении другой тяжелой обработки.