Справочник опций

Опции tsParticles глубокие, поэтому эта страница — практическая карта перед тем, как погружаться в каждую подопцию.

Выберите путь конфигурации

• Быстрый визуальный результат: начните с preset и переопределите ключевые поля.
• Полный контроль: задайте particles, interactivity и background вручную.
• Подход config-first: начните с @tsparticles/configs и постепенно дорабатывайте конфигурацию.

Быстрые страницы (локально)

• Background & Canvas
• Background Mask
• Full Screen
• Motion
• Manual Particles
• Themes
• Particles
• Particles Number
• Particles Move
• Particles Links
• Particles Palette
• Particles Shape
• Particles Collisions
• Particles Life
• Particles Orbit
• Particles Roll
• Particles Rotate
• Interactivity
• Interactivity Click
• Interactivity Hover
• Interactivity Div
• Interactivity Events
• Interactivity Modes
• Plugin: Absorbers
• Plugin: Emitters
• Plugin: Infection
• Plugin: Polygon Mask
• Performance Guide

Страницы глубокого разбора частиц

• Particles Bounce
• Particles Color
• Particles Destroy
• Particles Group
• Particles Opacity
• Particles Palette
• Particles Repulse
• Particles Shadow
• Particles Size
• Particles Stroke
• Particles Tilt
• Particles Twinkle
• Particles Wobble
• Particles ZIndex

Где находится основная документация

• Основная документация по опциям: tsparticles/markdown/Options.md
• Детальные страницы опций: tsparticles/markdown/Options/
• TypeScript-интерфейсы: tsparticles/engine/src/Options/Interfaces

Самые используемые root-опции

• background
• fullScreen
• interactivity
• particles
• detectRetina
• preset
• responsive

Самые используемые разделы

• background: базовые настройки фона canvas и маски.
• particles.number: количество и плотность.
• particles.move: скорость, направление и out modes.
• particles.shape: круг, полигон, изображение, эмодзи, пользовательские формы.
• particles.palette: быстрая смена согласованных наборов цветов.
• interactivity: режимы hover/click и внешние эффекты.
• detectRetina: баланс качества и производительности на high-DPI экранах.

Карта частиц (вложенный вид)

Используйте это дерево как навигацию перед открытием отдельных страниц:

particles
|- number
|- color
|- shape
|- size
|- opacity
|- move
|- links
|- collisions
|- life
|- destroy
|- group
|- orbit
|- repulse
|- roll
|- rotate
|- shadow
|- stroke
|- tilt
|- twinkle
|- wobble
|- zIndex
`- palette

Сначала открывайте root-документацию, затем углубляйтесь в разделы:

• Базовый раздел: Particles
• Углубление: Particles Number, Particles Move, Particles Links

Надежный процесс настройки опций

1. Начните с рабочей конфигурации из demos или presets.
2. Меняйте по одному разделу за раз.
3. Проверяйте через TypeScript (IOptions) в коде приложения.
4. Храните production-опции в отдельных JSON-файлах.

Минимальный типизированный пример

import type { ISourceOptions } from "@tsparticles/engine";

export const particlesOptions: ISourceOptions = {
  fpsLimit: 60,
  particles: {
    number: { value: 70 },
    move: { enable: true, speed: 1.5 },
  },
};

Ограничители производительности

• Предпочитайте @tsparticles/slim, если нет явной необходимости в продвинутых plugins.
• Держите количество частиц пропорционально площади контейнера.
• Профилируйте на реальных устройствах перед добавлением тяжелых интеракций.

Связанные ссылки

• Docs пакета configs: https://github.com/tsparticles/tsparticles/blob/main/utils/configs/README.md
• Папка presets: https://github.com/tsparticles/tsparticles/tree/main/presets
• Папка palettes: https://github.com/tsparticles/tsparticles/tree/main/palettes

Для полного описания каждой подопции также используйте исходные страницы tsparticles/markdown/Options, перечисленные выше.