Что такое Генератор эффектов частиц?

Проектируйте и предпросматривайте анимации частиц для вашего сайта или приложения. Настраивайте количество частиц, скорость, размер, цвет, форму, поведение при взаимодействии и физику для создания эффектов снега, конфетти, светлячков или галактики. Конфигурация экспортируется как готовый к использованию код.

Под капотом — tsParticles, поэтому скопированный JSON можно вставить в проект React, Vue или ванильный JavaScript без правок. Интеракции мышью и кликом (отталкивание, захват, увеличение, толчок, удаление), затухание прозрачности и анимация цвета (оттенка) работают сразу, а HTML-экспорт подгружает движок через CDN, так что код можно вставить в статическую страницу без шага сборки. Ещё можно записать живое превью в анимированный GIF и поделиться эффектом где угодно.

Как использовать

1. Выберите готовый пресет (снег, конфетти, светлячки, пузыри, галактика, сеть, фейерверк, огонь, дым) или создайте эффект с нуля.
2. Тонко настройте свойства частиц: количество, скорость, диапазон размеров, цвета, формы, прозрачность и физику — гравитацию и отскок.
3. Просмотрите анимацию в реальном времени, затем скопируйте JSON-конфигурацию tsParticles, экспортируйте её как отдельный HTML-сниппет или запишите превью в виде анимированного GIF.

Когда использовать

• Добавить слой снега или конфетти на праздничный лендинг или страницу запуска продукта.
• Собрать прототип фонового слоя hero-секции SaaS-сайта до того, как подключите дизайнера.
• Сделать фон в виде галактики или светлячков для портфолио или меню игры.

Результат

Веб-разработчик выбирает пресет «снег», увеличивает количество частиц до 200, добавляет лёгкий ветер и копирует JSON-конфигурацию, чтобы украсить праздничную страницу зимним эффектом.

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

Подойдёт ли экспортированный JSON для любого фронтенд-фреймворка?

Да. Конфиг совместим с tsParticles, у которого есть официальные обёртки для React, Vue, Svelte, Angular и ванильного JS. Установите нужный пакет, передайте JSON в проп options — и эффект отрендерится так же, как в превью здесь.

После какого количества частиц начинаются подтормаживания?

На современном ноутбуке 200–400 частиц идут стабильно 60 fps. После 500 на среднем смартфоне появятся фризы. Звёзды и многоугольники тяжелее кругов из-за прорисовки контура. Для мобильных оставьте 100–150 и отключите интеракцию.

Почему анимация выглядит иначе после экспорта в HTML?

HTML-сниппет растягивает канвас под размер родительского контейнера. Если вставить его в маленький div, частицы сожмутся. Задайте обёртке фиксированную высоту (например 100vh или 400px), и канвас подстроится.

Можно ли использовать свою картинку как форму частицы?

Из интерфейса — нет, но сам движок это поддерживает. Экспортируйте JSON и поправьте shape.options.image, указав путь к вашему PNG или SVG. Картинка отрисуется с тем размером и непрозрачностью, которые симуляция назначит каждой частице.

Анимация просядет в Core Web Vitals?

Движок весит около 30–80 КБ в gzip, плюс канвас постоянно перерисовывается. Чтобы не уронить Lighthouse, уменьшите количество частиц и выключите интеракцию на мобильных. Ленивая загрузка движка после показа hero-секции сохранит чистый LCP.

Похожие инструменты