tsParticles v4: HDR Colors, Paint Variants, and a Fully Modular Ecosystem

tsParticles v4.0 is finally here.

This release introduces long-requested features, major rendering improvements, and a completely modernized plugin architecture.

Compared to v3.9.1, nearly every subsystem has evolved.

Let’s take a look at what’s new.

✨ HDR & Display P3 Support

tsParticles v4 introduces HDR-ready rendering with automatic Display P3 color support.

Modern devices like recent Macbooks, iPhones, iPads, and high-end monitors can display a much wider color gamut than classic sRGB. v4 detects support automatically and switches the canvas to display-p3 when available.

{
  "hdr": true
}

(enabled by default)

The difference is immediately visible on compatible displays: reds, purples, neon tones, and gradients appear noticeably richer and more vibrant.

If Display P3 isn’t supported, tsParticles gracefully falls back to standard sRGB.

Additionally, canvas contexts now use:

desynchronized: true

to reduce rendering latency and improve animation smoothness.

🎨 The New Paint System

One of the biggest configuration improvements in v4 is the new unified paint system.

In v3, fills and strokes were configured separately:

• particles.color
• particles.stroke

In v4, both are merged into a single paint model:

{
  "particles": {
    "paint": {
      "color": { "value": "#ff0000" },
      "fill": {
        "enable": true,
        "opacity": { "min": 0.3, "max": 0.8 }
      },
      "stroke": {
        "color": { "value": "#000000" },
        "width": { "min": 1, "max": 3 },
        "opacity": 1
      }
    }
  }
}

The real power comes from paint variants.

paint can now be an array that combines both options. this allows to have hollow particles or no-stroke particles, or filled particles with a border, and you are in full control without going crazy with configurations:

{
  "particles": {
    "paint": [
      {
        "fill": {
          "enable": true,
          "color": { "value": "#ff0000" }
        },
        "stroke": {
          "color": { "value": "#00ff00" },
          "width": 2
        }
      },
      {
        "fill": {
          "enable": true,
          "color": { "value": "#0000ff" }
        },
        "stroke": {
          "color": { "value": "#ffff00" },
          "width": 1
        }
      }
    ]
  }
}

Each particle randomly selects a variant at creation time.

In v3, this usually required duplicated configs and particle groups. In v4, it’s built directly into the engine.

Migration

- particles.color
+ particles.paint.fill

- particles.stroke
+ particles.paint.stroke

🌈 Palette System

v4 introduces a completely new concept: Palettes.

Palettes provide curated combinations of:

• background colors
• blend modes
• fill colors
• stroke colors

with a single configuration entry.

import { loadFireworksGoldPalette } from "@tsparticles/palette-fireworks-gold";

await loadFireworksGoldPalette(engine);

{
  "palette": "fireworks-gold"
}

This automatically configures:

• background.color
• particles.paint
• blend modes like "screen" or "lighter"

More than 100 palettes are already available across categories like:

Each palette is distributed as its own npm package for optimal tree-shaking and lazy loading.

🧩 Fully Modular Plugin Architecture

The largest architectural change in v4 is the move toward a truly modular ecosystem.

Many features previously embedded in the core have been extracted into standalone plugins managed through the new PluginManager.

Benefits include:

• smaller bundles
• improved tree-shaking
• easier maintenance
• independent feature releases
• lazy-loaded functionality

New Plugins

🔷 New Shapes

Two new built-in shapes are now available:

The Matrix shape supports animated katakana, ASCII, and kanji characters with randomized updates for classic cyberpunk effects.

🖥️ OffscreenCanvas Support

Rendering internals have been modernized using OffscreenCanvas.

When possible, tsParticles automatically transfers rendering using:

transferControlToOffscreen()

Benefits include:

• reduced main-thread overhead
• zero-copy rendering
• lower rendering latency
• a unified rendering pipeline

ILoadParams.element now accepts both:

• HTMLCanvasElement
• OffscreenCanvas

⚡ SpatialHashGrid Replaces QuadTree

The old QuadTree implementation has been replaced with a SpatialHashGrid.

This improves:

• collision performance
• particle link queries
• memory efficiency
• scalability in high-particle scenes

🔄 New Easing Functions

v4 adds three new easing families:

Example:

{
  "particles": {
    "move": {
      "speed": {
        "min": 1,
        "max": 5,
        "easing": "ease-in-out-sigmoid"
      }
    }
  }
}

📦 Migration Summary

New Root Options

+ hdr: boolean
+ palette?: string
+ resize: ResizeEvent

New Particle Options

+ paint: Paint | Paint[]
+ palette?: string

Moved to Plugins

- backgroundMask
- interactivity
- manualParticles
- responsive
- themes

Removed / Replaced

- color
+ paint.fill

- stroke
+ paint.stroke

📋 Quick Migration Guide

- "@tsparticles/engine": "^3.9.1"
+ "@tsparticles/engine": "^4.0.0"

- particles.color.value
+ particles.paint.fill.color.value

- particles.stroke.width
+ particles.paint.stroke.width

- interactivity.resize.enable
+ resize.enable

Package Renames

- @tsparticles/move-base
+ @tsparticles/plugin-move

- @tsparticles/updater-color
+ @tsparticles/updater-paint

- @tsparticles/updater-stroke-color
+ @tsparticles/updater-paint

Complete migration guide:

https://particles.js.org/migrations/from-v3

🔜 What’s Next

v4 establishes the foundation for the future of tsParticles.

The new architecture enables faster experimentation and community-driven extensions without bloating the core engine.

Planned areas of expansion include:

• community-created palettes
• additional standalone effects
• new shapes

Useful Links

• Documentation: https://particles.js.org
• GitHub: https://github.com/tsparticles/tsparticles
• Confetti: https://confetti.js.org
• Discord: https://discord.gg/hACwv45Hme
• Reddit: https://reddit.com/r/tsParticles/
• Sponsor: https://github.com/sponsors/tsparticles
• Personal Sponsor Page: https://github.com/sponsors/matteobruni

Happy coding 🚀

Note: This post was generated with the help of AI, then reviewed and refined manually.