Official presets and palettes to use tsParticles in minutes without starting from an empty configuration.
- Reduce setup time: install and load a ready-to-use effect
- Start from a concrete visual baseline and customize only what you need
- Keep a standard, tested base for websites, landing pages, and apps
pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-starsimport { tsParticles } from "@tsparticles/engine";
import { loadSlim } from "@tsparticles/slim";
import { loadStarsPreset } from "@tsparticles/preset-stars";
await loadSlim(tsParticles);
await loadStarsPreset(tsParticles);
await tsParticles.load({
id: "tsparticles",
options: {
preset: "stars",
},
});- Install
@tsparticles/engineplus one bundle (@tsparticles/slimrecommended) - Register the preset loader before
tsParticles.load(...) - Start from one preset and then merge your custom options
- I want the smallest setup first: use
@tsparticles/slim+ one preset package - I want to test many presets quickly: use
tsparticlesand register only the presets you need - I already have options and need only colors: use a palette package and keep your current behavior settings
- Preset: defines complete behavior (movement, interactions, style)
- Palette: mainly defines reusable color combinations
If you need a complete effect quickly, use a preset. If you already have a config and only want a color direction, use a palette.
Palettes are now maintained in a dedicated repository:
- Repository: https://github.com/tsparticles/palettes
- Samples: https://particles.js.org/samples/palettes/
Use this repository for preset packages only.
Presets work with the core library and official wrappers (React, Vue, Angular, Svelte, etc.).
General guides:
- Main tsParticles repository: https://github.com/tsparticles/tsparticles
- Official documentation: https://particles.js.org/docs/
- Register the preset loader before calling
tsParticles.load(...) - Use the same
idvalue in your HTML container and load call - Do not assume every preset is included in every bundle; import the specific preset package
- Start from a single preset, then merge custom options incrementally
- Main docs: https://particles.js.org/docs/
- Main tsParticles repository: https://github.com/tsparticles/tsparticles
- Presets samples: https://particles.js.org/samples/presets/
If you need a new preset or want to contribute:
- open an issue or pull request in this repository
- include screenshots/GIFs and a config snippet to speed up review