Интерактивный фон из точек на canvas

Что это за эффект

Ровная сетка мелких точек. По ней медленно идёт диагональная волна: точки чуть увеличиваются и уменьшаются, и фон «дышит». Когда курсор проходит рядом, точки расходятся от него и пружинят обратно с лёгким покачиванием. Эффект заметен, но не спорит с контентом, поэтому подходит фоном под текст.

Где использовать

• Фон первого экрана под заголовком и кнопкой.
• Фон карточки или блока с ключевой цифрой, тарифом или формой.
• Заглушка вместо иллюстрации в технических продуктах, где нужна фактура, а не картинка.

Как добавить на сайт

Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам перенесёт стили, разметку и скрипт, впишет их в вашу вёрстку и подставит ваши тексты и изображения. Ваши настройки сохранятся.

Если что-то нужно иначе, скажите агенту об этом теми же словами, что и человеку: «сделай на всю ширину экрана», «поставь под заголовком на главной», «замедли в два раза».

Вручную. Положите canvas первым слоем под содержимое блока:

<section class="hero">
  <canvas class="dot-field" aria-hidden="true"></canvas>
  <h1>Заголовок</h1>
</section>

.hero { position: relative; }
.dot-field { position: absolute; inset: 0; width: 100%; height: 100%; color: #a3a3a3; }

createDotField(document.querySelector('.dot-field'), { gap: 14, reach: 120 });

Цвет точек берётся из CSS-свойства color у canvas, размер — из его CSS-размера. При изменении размера блока поле перестраивается само. Курсор отслеживается над родительским блоком, поэтому точки реагируют, даже когда курсор над текстом. Готовый код с текущими настройками дают кнопки «Скопировать код» и «Скачать код» выше.

Настройки

• Шаг сетки и размер точки.
• Радиус расхождения и сила — как далеко от курсора и насколько сильно точки отходят.
• Упругость и гашение — как резко точки возвращаются и как долго колеблются.
• Волна и скорость волны: при 0 волна выключена, фон статичен до наведения.

Доступность и производительность

Canvas помечен aria-hidden: это чистое оформление, скринридер его пропускает. Рисование идёт на одном canvas, без сотен DOM-элементов. При настройке «Уменьшить движение» волна и пружины отключаются. Под текстом выбирайте светлый цвет точек, чтобы не страдал контраст.

Частые вопросы

Можно ли сделать точки цветными? Да, задайте любой color у canvas, в том числе через CSS-переменную темы.

Будет ли работать на телефоне? Да: волна идёт на любом экране, а курсора на телефоне нет, поэтому там поле работает как спокойный живой фон.