A particle background renders small animated dots or shapes drifting across a section, adding motion and depth to hero areas and banners without any custom code.
What It Does
The Container block’s Background Middle Layer includes a Canvas Effect option that renders an animated particle canvas, drawn from a chosen Canvas Style, as the section’s background.
Why It Matters
Particle animation is a common way to make a hero or feature section feel modern and tech-forward without loading a video file or a full illustration. Because it renders as lightweight canvas animation rather than an image or video asset, it adds motion without the page weight of a background video.
What You Get
A Canvas Style picker with several predefined particle presets plus a Custom Skin option that accepts hand-built particles.js JSON, and per-effect color and additional settings once a style is chosen.
Benefits
- Predefined Canvas Style presets give an animated particle background with no design work required.
- Custom Skin supports a fully hand-tuned particle configuration for teams that want exact control over particle count, speed, and shape.
- Runs as canvas animation rather than a media file, so it does not add an image or video download to the page.
Capabilities
- Canvas Effect – the background option itself, selected from Select Background Option.
- Canvas Style – a dropdown of predefined particle presets, each exposing its own color and extra settings.
- Custom Skin – accepts a particles.js-format JSON configuration for a fully custom particle effect.
How It Works
Canvas Effect draws the particle animation onto an HTML canvas layered as the container’s background. Choosing a preset from Canvas Style loads that preset’s built-in particle behavior along with whatever color/extra fields that specific preset exposes; those exposed fields vary by preset, since not every particle style has the same configurable properties. Choosing Custom Skin instead expects a particles.js-compatible JSON payload, which is why the block links out to a particle generator tool for building that configuration rather than trying to expose every particles.js option as individual fields.
How to Use It
Add the Container block with the appropriate layout to the page and follow the steps:
1. Go to Style > Background Middle Layer.
2. Select Canvas Effect from the Select Background Option dropdown.
3. From the Canvas Style dropdown list, choose a predefined effect, or select Custom Skin to add a custom effect.
You’ll get options to change the particle color, along with some additional settings for some effects.
Note: To use the Custom Skin option you have to add the particle JSON code; you can build this with this particle generator.
You’ll now see an animated particle background.
Note: For better visibility, add a normal background color to the container behind the particle canvas.
Use Cases
- Hero sections and banner areas where animated particles make the first impression more engaging
- Feature or service sections where subtle background motion adds visual distinction without competing with the content
- Landing pages where a Custom Skin particle configuration reinforces brand colors
Limitations
- Custom Skin requires hand-built or externally generated particles.js JSON; there is no visual particle-count or speed slider inside the block itself for a fully custom configuration.
- Which extra fields (color, count, speed) are exposed depends on the chosen Canvas Style preset; not every preset offers the same set of adjustable options.
- A reported case (ticket #8371) found a layered particle+image background rendering correctly right after saving a page but changing on subsequent page loads/refreshes, worth checking after any big background change if the effect looks different than expected on a fresh visit.
Troubleshooting
- The particle animation is barely visible or hard to see: the block’s own guidance is to add a normal background color behind the Canvas Effect for better contrast.
- A Custom Skin’s JSON does not seem to apply: confirm the JSON was built for or is compatible with particles.js format, since Custom Skin expects that specific structure.
- A layered particle/image background looks correct immediately after saving but different on a later visit or refresh: matches a reported case (ticket #8371); re-saving the page (Update, without changing settings) has resolved this pattern before.
To explore other container background options in Nexter Blocks, see the Parallax Effect and Video Background docs.
