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.colorparticles.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.colorparticles.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()
Benefits include:
- reduced main-thread overhead
- zero-copy rendering
- lower rendering latency
- a unified rendering pipeline
ILoadParams.element now accepts both:
HTMLCanvasElementOffscreenCanvas
⚡ 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"
}
}
}
}
📦 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.