11# tsParticles
22
3- Quick guide to understand what to use, where to find options , and how to start in a few minutes.
3+ Quick guide to choose the right package, find the right option reference , and start from presets, palettes, or ready-made configs in a few minutes.
44
5- ## Start here
5+ ## Quick checklist
66
77If this is your first time with tsParticles:
88
9- 1 . Install a ready bundle (` @tsparticles/slim ` in most cases)
10- 2 . Load the bundle once
11- 3 . Start an instance with ` tsParticles.load(...) `
9+ 1 . Install ` @tsparticles/engine `
10+ 2 . Pick one runtime path:
11+ - ` @tsparticles/slim ` for most production websites and apps
12+ - ` @tsparticles/all ` for prototypes, playgrounds, and full feature coverage
13+ - only the packages you need if you want a minimal custom build
14+ 3 . Load your chosen bundle once
15+ 4 . Start with one of these inputs:
16+ - manual options
17+ - a ready-made config from ` @tsparticles/configs `
18+ - an official preset from the ` tsparticles/presets ` repository
19+
20+ ## Minimal start example
1221
1322``` ts
1423import { tsParticles } from " @tsparticles/engine"
@@ -41,14 +50,9 @@ await tsParticles.load({
4150## Choose your quick-start path
4251
4352- ** I need a production-ready default** : ` @tsparticles/slim `
44- - ** I need only core and custom plugins** : ` @tsparticles/engine `
53+ - ** I need only core plus custom plugins** : ` @tsparticles/engine `
4554- ** I need every feature for quick prototyping** : ` @tsparticles/all `
46-
47- ## Common pitfalls
48-
49- - Calling ` tsParticles.load(...) ` before loading bundle features
50- - Using an ` id ` that does not exist in the DOM
51- - Mixing too many presets/options in the first iteration
55+ - ** I want a ready visual starting point** : use ` @tsparticles/configs ` or an official preset first
5256
5357## Quick documentation map
5458
@@ -58,18 +62,68 @@ await tsParticles.load({
5862- Plugins, custom shapes, custom presets: [ Plugins] ( ../Plugins.md )
5963- Migration from particles.js: [ pjsMigration] ( ../pjsMigration.md )
6064
65+ ## Detailed option guides
66+
67+ - Canvas and global behavior: [ Background] ( ../Options/Background.md ) , [ Background Mask] ( ../Options/BackgroundMask.md ) , [ Full Screen] ( ../Options/FullScreen.md ) , [ Motion] ( ../Options/Motion.md )
68+ - Interactivity: [ Interactivity] ( ../Options/Interactivity.md ) , [ Click] ( ../Options/Interactivity/Click.md ) , [ Hover] ( ../Options/Interactivity/Hover.md ) , [ Div] ( ../Options/Interactivity/Div.md )
69+ - Particle behavior: [ Particles] ( ../Options/Particles.md ) , [ Color] ( ../Options/Particles/Color.md ) , [ Collisions] ( ../Options/Particles/Collisions.md ) , [ Life] ( ../Options/Particles/Life.md ) , [ Orbit] ( ../Options/Particles/Orbit.md )
70+ - Plugin-driven options: [ Absorbers] ( ../Options/Plugins/Absorbers.md ) , [ Emitters] ( ../Options/Plugins/Emitters.md ) , [ Infection] ( ../Options/Plugins/Infection.md ) , [ Polygon Mask] ( ../Options/Plugins/PolygonMask.md )
71+
72+ ## Ready-made starting sources
73+
74+ ### Configs (` @tsparticles/configs ` )
75+
76+ Use configs when you want a concrete example object you can inspect and modify directly.
77+
78+ - Package README: < https://github.com/tsparticles/tsparticles/blob/main/utils/configs/README.md >
79+ - Typical use case: copy a working config, then tune particles, interactivity, and visuals step by step
80+
81+ ### Presets
82+
83+ Use presets when you want a reusable effect name such as ` stars ` , ` fireworks ` , or ` confetti ` .
84+
85+ - Repository: < https://github.com/tsparticles/presets >
86+ - Demo catalog: < https://particles.js.org/samples/presets/ >
87+
88+ Main preset catalog:
89+
90+ - Ambient
91+ - Big Circles
92+ - Bubbles
93+ - Confetti
94+ - Confetti Cannon
95+ - Confetti Explosions
96+ - Confetti Falling
97+ - Confetti Parade
98+ - Fire
99+ - Firefly
100+ - Fireworks
101+ - Fountain
102+ - Hyperspace
103+ - Links
104+ - Sea Anemone
105+ - Snow
106+ - Squares
107+ - Stars
108+ - Triangles
109+
110+ ### Palettes
111+
112+ Use palettes when you already have the behavior you want and only need a reusable color direction.
113+
114+ - Repository directory: < https://github.com/tsparticles/presets/tree/main/palettes >
115+ - Palette-based demos: < https://particles.js.org/samples/presets/ >
116+
61117## Bundle choice
62118
63119- ` @tsparticles/basic ` : simple use cases and reduced payload
64120- ` @tsparticles/slim ` : recommended choice for most websites and apps
65121- ` tsparticles ` : complete bundle with many extensions
66122- ` @tsparticles/all ` : includes everything (useful for prototypes/playgrounds)
67123
68- ## Ready-to-use presets
69-
70- If you want to start without configuring everything manually, use official presets:
71-
72- - Repository: < https://github.com/tsparticles/presets >
73- - Demo catalog: < https://particles.js.org/samples/presets/ >
124+ ## Common pitfalls
74125
75- Presets are great to start fast and then customize only the options you need.
126+ - Calling ` tsParticles.load(...) ` before loading bundle or preset features
127+ - Using an ` id ` that does not exist in the DOM
128+ - Assuming configs or presets also load the runtime plugins they depend on
129+ - Mixing too many presets/options in the first iteration instead of starting from one stable base
0 commit comments