Riferimento Opzioni

Le opzioni di tsParticles sono molto estese: questa pagina e una mappa pratica prima di entrare nei singoli sotto-parametri.

Scegli il tuo percorso di configurazione

• Risultato visivo rapido: parti da un preset e sovrascrivi i campi chiave.
• Controllo completo: definisci manualmente particles, interactivity e background.
• Approccio config-first: parti da @tsparticles/configs e poi affina passo dopo passo.

Docs rapide (locali)

• 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

Pagine di approfondimento Particles

• 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

Dove trovare la documentazione di riferimento

• Documentazione opzioni principali: tsparticles/markdown/Options.md
• Pagine opzioni dettagliate: tsparticles/markdown/Options/
• Interfacce TypeScript: tsparticles/engine/src/Options/Interfaces

Opzioni root piu usate

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

Sezioni piu usate

• background: sfondo canvas e basi del masking.
• particles.number: quantita e densita.
• particles.move: velocita, direzione e out modes.
• particles.shape: circle, polygon, image, emoji e forme custom.
• particles.palette: cambia rapidamente set di colori coordinati.
• interactivity: modalita hover/click ed effetti esterni.
• detectRetina: compromesso qualita/performance su schermi ad alta densita.

Mappa particles (vista nidificata)

Usa questo albero rapido come guida di navigazione prima di aprire le singole pagine:

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

Apri prima i documenti root, poi gli approfondimenti:

• Base: Particles
• Approfondimenti: Particles Number, Particles Move, Particles Links

Workflow sicuro per le opzioni

1. Parti da una configurazione funzionante presa da demo o preset.
2. Modifica una sezione per volta.
3. Valida con TypeScript (IOptions) nel codice applicativo.
4. Mantieni le opzioni di produzione in file JSON dedicati.

Esempio minimo tipizzato

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

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

Guardrail performance

• Preferisci @tsparticles/slim salvo esigenze di plugin avanzati.
• Mantieni il numero di particelle proporzionato all'area del contenitore.
• Profila su dispositivi reali prima di aggiungere interazioni pesanti.

Riferimenti correlati

• Docs pacchetto config: https://github.com/tsparticles/tsparticles/blob/main/utils/configs/README.md
• Cartella preset: https://github.com/tsparticles/tsparticles/tree/main/presets
• Cartella palette: https://github.com/tsparticles/tsparticles/tree/main/palettes

Per i dettagli completi su ogni sotto-opzione, consulta anche le pagine sorgente in tsparticles/markdown/Options linkate sopra.