tsParticles Presets

Official presets and palettes to use tsParticles in minutes without starting from an empty configuration.

Why presets

• 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

Quick Start

Installation

pnpm add @tsparticles/engine @tsparticles/slim @tsparticles/preset-stars

Register and use

import { 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",
  },
});

Quick checklist

1. Install @tsparticles/engine plus one bundle (@tsparticles/slim recommended)
2. Register the preset loader before tsParticles.load(...)
3. Start from one preset and then merge your custom options

Choose your quick-start path

• I want the smallest setup first: use @tsparticles/slim + one preset package
• I want to test many presets quickly: use tsparticles and 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 or Palette?

• 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.

Main preset catalog

Palettes repository

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.

Framework integration

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/

Common pitfalls

• Register the preset loader before calling tsParticles.load(...)
• Use the same id value 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

Related docs

• Main docs: https://particles.js.org/docs/
• Main tsParticles repository: https://github.com/tsparticles/tsparticles
• Presets samples: https://particles.js.org/samples/presets/

Support

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