Реалізація Particles.js / tsParticles ефектів на сайті
Ви додали на сайт фонову анімацію частинок, а отримали гальма на мобільних і конфлікт з Core Web Vitals. Знайома ситуація? Ми стикалися з цим десятки разів і виробили підхід, який дає гарний ефект без втрати продуктивності. Наша команда використовує тільки tsParticles — наступник закинутого Particles.js, з TypeScript-типами та модульною архітектурою. Ми гарантуємо, що анімація не погіршить LCP та INP, а при необхідності відключиться на слабких пристроях. Досвід показує, що правильна конфігурація скорочує час завантаження на мобільних на 40% порівняно з Particles.js. Крім того, ви можете реалізувати ефект снігу, конфетті або зоряного неба — будь-який пресет налаштовується під ваш бренд.
Як вибрати між Particles.js і tsParticles?
Particles.js не оновлюється вже багато років — він не підтримує сучасні фреймворки і не оптимізований для SSR. tsParticles — активний форк з 10 тисячами зірок на GitHub, вбудованою підтримкою React, Vue та Angular, а також можливістю завантажувати тільки потрібні пресети. tsParticles у 3 рази швидший при рендерингу на мобільних пристроях завдяки модульності. Порівняння в таблиці:
| Критерій | Particles.js | tsParticles |
|---|---|---|
| Підтримка | Закинутий з 2016 | Активна (релізи щомісяця) |
| TypeScript | Немає | Повна типізація |
| Модульність | Моноліт ~150 КБ | Пресети від 40 КБ gzip |
| Інтерактивність | Тільки hover | Hover, click, grab, bubble, repulse |
| SSR/Next.js | Не підтримує | @tsparticles/react + dynamic import |
Якщо проект новий — використовуйте tsParticles. Ми переїжджаємо з Particles.js на tsParticles для всіх клієнтів, економлячи в середньому 30% часу на налагодження.
Як інтегрувати tsParticles в React?
Крок 1. Встановіть модульну збірку. Мінімальна установка — ядро + базові елементи:
npm install @tsparticles/react @tsparticles/engine @tsparticles/slim
Крок 2. Створіть компонент з динамічним завантаженням движка:
// components/ParticlesBackground.tsx
'use client'
import { useEffect, useState, useCallback } from 'react'
import Particles, { initParticlesEngine } from '@tsparticles/react'
import { loadSlim } from '@tsparticles/slim'
import type { ISourceOptions } from '@tsparticles/engine'
const particleOptions: ISourceOptions = {
background: {
color: { value: 'transparent' },
},
fpsLimit: 60,
interactivity: {
events: {
onHover: {
enable: true,
mode: 'repulse',
},
onClick: {
enable: true,
mode: 'push',
},
},
modes: {
repulse: { distance: 100, duration: 0.4 },
push: { quantity: 4 },
},
},
particles: {
color: { value: '#3b82f6' },
links: {
color: '#3b82f6',
distance: 150,
enable: true,
opacity: 0.3,
width: 1,
},
move: {
enable: true,
speed: 1.5,
direction: 'none',
random: false,
straight: false,
outModes: { default: 'bounce' },
},
number: {
value: 60,
density: { enable: true, area: 800 },
},
opacity: { value: 0.5 },
shape: { type: 'circle' },
size: { value: { min: 1, max: 3 } },
},
detectRetina: true,
}
export function ParticlesBackground() {
const [engineReady, setEngineReady] = useState(false)
useEffect(() => {
initParticlesEngine(async (engine) => {
await loadSlim(engine)
}).then(() => setEngineReady(true))
}, [])
if (!engineReady) return null
return (
<Particles
id="tsparticles"
options={particleOptions}
className="absolute inset-0 -z-10"
/>
)
}
Чому важлива продуктивність на мобільних?
Для мобільних і слабких пристроїв ми додаємо адаптивну логіку: перевіряємо window.innerWidth, prefers-reduced-motion та navigator.hardwareConcurrency. Якщо пристрій слабкий — компонент не рендериться. Це не збільшує LCP і не викликає jank. У наших проєктах така перевірка скорочує час завантаження на мобільних у середньому на 200 мс.
Пресет: зв'язана мережа (network)
// presets/network.ts
import type { ISourceOptions } from '@tsparticles/engine'
export const networkPreset: ISourceOptions = {
fpsLimit: 60,
particles: {
number: { value: 80, density: { enable: true, area: 1000 } },
color: { value: ['#3b82f6', '#8b5cf6', '#06b6d4'] },
shape: { type: 'circle' },
opacity: {
value: { min: 0.3, max: 0.8 },
animation: { enable: true, speed: 1, minimumValue: 0.1 },
},
size: {
value: { min: 1, max: 4 },
animation: { enable: true, speed: 2, minimumValue: 0.5 },
},
links: {
enable: true,
distance: 120,
color: { value: '#94a3b8' },
opacity: 0.2,
width: 1,
triangles: {
enable: false,
},
},
move: {
enable: true,
speed: { min: 0.5, max: 1.5 },
direction: 'none',
random: true,
straight: false,
outModes: { default: 'out' },
},
},
interactivity: {
events: {
onHover: { enable: true, mode: ['grab', 'bubble'] },
onClick: { enable: true, mode: 'repulse' },
resize: { enable: true },
},
modes: {
grab: { distance: 140, links: { opacity: 0.8 } },
bubble: { distance: 100, size: 8, duration: 0.3, opacity: 0.8 },
repulse: { distance: 150, duration: 0.4 },
},
},
detectRetina: true,
}
Пресет: сніг (snow)
Для ефекту падаючого снігу використовуйте наступний пресет, який можна адаптувати під інтенсивність і розмір сніжинок:
// presets/snow.ts
import type { ISourceOptions } from '@tsparticles/engine'
export const snowPreset: ISourceOptions = {
fpsLimit: 60,
particles: {
number: { value: 200, density: { enable: true, area: 800 } },
color: { value: '#ffffff' },
shape: { type: 'circle' },
opacity: { value: { min: 0.4, max: 0.9 } },
size: { value: { min: 1, max: 6 } },
move: {
enable: true,
speed: { min: 0.5, max: 2 },
direction: 'bottom',
random: true,
straight: false,
outModes: { default: 'out' },
},
wobble: { enable: true, distance: 10, speed: 5 },
},
detectRetina: true,
}
Конфетті при події
// hooks/useConfetti.ts
import { useCallback } from 'react'
import { tsParticles } from '@tsparticles/engine'
export function useConfetti() {
const fire = useCallback(async (originX = 0.5, originY = 0.6) => {
await tsParticles.load({
id: 'confetti-' + Date.now(),
options: {
fullScreen: { enable: true, zIndex: 100 },
fpsLimit: 60,
particles: {
number: { value: 0 },
color: {
value: ['#f59e0b', '#3b82f6', '#10b981', '#ef4444', '#8b5cf6'],
},
shape: { type: ['square', 'circle'] },
opacity: {
value: 1,
animation: {
enable: true,
speed: 0.5,
startValue: 'max',
destroy: 'min',
},
},
size: { value: { min: 4, max: 10 } },
rotate: {
value: { min: 0, max: 360 },
animation: { enable: true, speed: 20, sync: false },
},
tilt: {
value: { min: 0, max: 360 },
enable: true,
animation: { enable: true, speed: 15, sync: false },
},
move: {
enable: true,
speed: { min: 8, max: 15 },
direction: 'bottom',
gravity: { enable: true, acceleration: 9.8 },
drift: { min: -2, max: 2 },
decay: { min: 0.02, max: 0.04 },
outModes: { default: 'destroy', top: 'none' },
},
},
emitters: {
direction: 'top',
life: { count: 1, duration: 0.1, delay: 0 },
rate: { delay: 0, quantity: 150 },
size: { width: 0, height: 0 },
position: { x: originX * 100, y: originY * 100 },
},
},
})
}, [])
return { fire }
}
// Використання
const { fire } = useConfetti()
const handleFormSubmit = async () => {
await submitForm()
fire()
}
Порівняння пресетів за розміром
| Пресет | Розмір (gzip) | Функції |
|---|---|---|
@tsparticles/slim |
~40 КБ | Базові форми, рух, взаємодія |
@tsparticles/all |
~180 КБ | Всі пресети (сніг, конфетті, зірки та ін.) |
@tsparticles/engine (тільки ядро) |
~20 КБ | Тільки ядро, без елементів |
Типові помилки при роботі з tsParticles
- Завантаження всього пакета
@tsparticles/allбез необхідності — збільшує bundle на 140 КБ. - Ігнорування
detectRetina: true— на Retina-дисплеях частинки виглядають розмито. - Неправильне використання
fpsLimit: 30для економії батареї — краще залишити 60 і динамічно відключати анімацію приprefers-reduced-motion. - Відсутність адаптивного відключення на мобільних — призводить до лагів на слабких пристроях.
Чому варто замовити реалізацію у нас?
Ми — команда з 10+ років досвіду в анімаціях та веб-розробці. За цей час реалізували понад 40 проєктів з частинками: від простих фонів до складних інтерактивних сцен. Наші інженери знають, як уникнути типових помилок: N+1 запит при завантаженні, неправильне використання fpsLimit, витоки пам'яті при зміні маршруту. Ми надаємо гарантію на продуктивність — LCP не збільшиться більш ніж на 50 мс після впровадження ефекту. Зв'яжіться з нами для консультації та оцінки вашого проекту.
Що входить в роботу
- Аналітика: оцінка поточної продуктивності, вибір відповідного пресета.
- Проєктування: конфігурація частинок під бренд, налаштування адаптивності.
- Реалізація: інтеграція з React/Next.js, написання кастомних пресетів.
- Тестування: перевірка на мобільних і слабких пристроях, замір Core Web Vitals.
- Деплой: установка на продакшен, передача документації з кастомізації.
Після завершення ви отримуєте: вихідний код з коментарями, доступ до репозиторію, навчання вашого розробника (1 година), гарантійну підтримку 2 тижні.
Типові терміни
Базовий фон з частинками — 3–4 години. Кілька пресетів з кастомними налаштуваннями, конфетті, адаптивним відключенням та оптимізацією продуктивності — 1–2 робочих дні. Вартість розраховується індивідуально. Отримайте консультацію — ми відповімо протягом години.