DEV Community

Cover image for Meet tsParticles v4: richer colors, modular plugins, and a brand new paint system
tsParticles profile image Matteo Bruni
Matteo Bruni for tsParticles

Posted on

Meet tsParticles v4: richer colors, modular plugins, and a brand new paint system

#javascript #showdev #typescript #webdev

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
}
Enter fullscreen mode Exit fullscreen mode

(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
Enter fullscreen mode Exit fullscreen mode

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
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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
        }
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

🌈 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);
Enter fullscreen mode Exit fullscreen mode 
{
  "palette": "fireworks-gold"
}
Enter fullscreen mode Exit fullscreen mode

This automatically configures:

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

More than 100 palettes are already available across categories like:

Category Examples
🎆 Fireworks gold, neon, rainbow, silver
🌌 Space nebula, pulsar, supernova
🌿 Nature autumnLeaves, cherryBlossom
🌊 Water deepOcean, splash
🔥 Fire embersAndAsh, moltenMetal
🎮 Gaming minecraft, pacman, tetris
🖥️ Tech matrixRain, hologram, vaporwave
🎨 Spectrum rainbow, rgbPrimaries
🎯 Vibrant neon, retro, tropical

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

Plugin Description
@tsparticles/plugin-blend Blend modes (screen, lighter, multiply)
@tsparticles/plugin-manual-particles Precise particle positioning
@tsparticles/plugin-zoom Particle zoom effects
@tsparticles/plugin-move Unified movement system
@tsparticles/plugin-background-mask Background masking
@tsparticles/plugin-trail Particle trails
@tsparticles/plugin-interactivity Mouse/touch interactions
@tsparticles/plugin-themes Theme support
@tsparticles/plugin-responsive Responsive configurations

🔷 New Shapes

Two new built-in shapes are now available:

Shape Package
Matrix @tsparticles/shape-matrix
Squircle @tsparticles/shape-squircle

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()
Enter fullscreen mode Exit fullscreen mode

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:

Easing Family Package
Gaussian @tsparticles/easing-gaussian
Sigmoid @tsparticles/easing-sigmoid
Smoothstep @tsparticles/easing-smoothstep

Example:

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

📦 Migration Summary

New Root Options 

+ hdr: boolean
+ palette?: string
+ resize: ResizeEvent
Enter fullscreen mode Exit fullscreen mode

New Particle Options 

+ paint: Paint | Paint[]
+ palette?: string
Enter fullscreen mode Exit fullscreen mode

Moved to Plugins 

- backgroundMask
- interactivity
- manualParticles
- responsive
- themes
Enter fullscreen mode Exit fullscreen mode

Removed / Replaced 

- color
+ paint.fill

- stroke
+ paint.stroke
Enter fullscreen mode Exit fullscreen mode

📋 Quick Migration Guide 

- "@tsparticles/engine": "^3.9.1"
+ "@tsparticles/engine": "^4.0.0"
Enter fullscreen mode Exit fullscreen mode 
- particles.color.value
+ particles.paint.fill.color.value
Enter fullscreen mode Exit fullscreen mode 
- particles.stroke.width
+ particles.paint.stroke.width
Enter fullscreen mode Exit fullscreen mode 
- interactivity.resize.enable
+ resize.enable
Enter fullscreen mode Exit fullscreen mode

Package Renames 

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

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

- @tsparticles/updater-stroke-color
+ @tsparticles/updater-paint
Enter fullscreen mode Exit fullscreen mode

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

Happy coding 🚀

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

Top comments (0)