Как работает фон
Частицы распределены по глубине: ближние движутся быстрее и оставляют короткие световые следы. Курсор смещает точку схода, а без мыши центр медленно движется самостоятельно.
Где использовать
Первый экран технологического продукта, игры или портфолио. Оставьте достаточно спокойного пространства под текст и не усиливайте яркость до потери контраста.
Установка в Zero Block
Создайте Zero Block и добавьте HTML-элемент за текстом и кнопками. Выберите Window Container, ширину и высоту 100%, центрирование по обеим осям. Проверьте размеры на каждом адаптивном разрешении: элемент нулевой высоты не сможет показать фон.
После покупки откройте модификацию в личном кабинете, настройте пример и сгенерируйте полный код. Вставьте его в HTML-элемент целиком, сохраните и опубликуйте страницу. Не вставляйте этот пакет в head или в текстовый элемент: ему нужен собственный контейнер внутри Zero Block.
Настройка внешнего вида
Цвет задаёт оттенок звёзд, плотность — их число, интенсивность — длину световых следов, скорость — темп полёта.
Начните с умеренных значений. В первую очередь проверьте читаемость текста, затем увеличивайте плотность или интенсивность. Цветовая подложка не должна спорить с кнопкой основного действия.
Курсор, касание и доступность
Координаты курсора считываются с артборда Zero Block, поэтому фон реагирует и когда над ним расположены текст или кнопки. Декоративный canvas не перехватывает клики. На телефоне касание задаёт положение реакции, а обработчики не блокируют прокрутку.
При включённом уменьшенном движении фон становится статичным. Анимация приостанавливается вне экрана и в скрытой вкладке. Canvas ограничивает разрешение и количество деталей для снижения нагрузки, но несколько больших активных фонов всё равно стоит проверять на реальном телефоне.
Что проверить после публикации
Эффект не должен перекрывать текст непрозрачным HTML-элементом. При высокой плотности начинайте с одного фона на странице.
Проверьте фон по опубликованному адресу. Двигайте мышь над всеми слоями блока, нажмите ссылки и кнопки, прокрутите страницу на телефоне и поверните устройство. После изменения размеров фон должен занять новую область HTML-элемента.
Изменение настроек
Параметры меняются в личном кабинете без ручного редактирования JavaScript. После изменения сгенерируйте код повторно, замените прежнюю копию в HTML-элементе и опубликуйте страницу. Эти настройки не переписывают ваш сайт автоматически.
Живой пример и инструкция
Стоимость модификации — 500 ₽. Полная инструкция с оформленными шагами доступна на странице эффекта.
Открыть живой пример