This page provides an overview of all options the NextParticle library provides.

Please note: Press the rerun button on the codepen previews to interact with them.

Table of Contents

Initialize by HTML

Everyimgtag with the classnext-particlewill be automatically initialized with the NextParticle script.

The width and height of the createdcanvasequals the size of the image.

The automatically created NextParticle instance can be accessed by JavaScript by<imageNode>.nextParticle.

Initialize by js

NextParticle can be initialized by passing animgelement to the NextParticle constructor. The params which are present on the image tag as data attributes are automatically used.

Please note: Data attributes are ignored when params object is passed.

NextParticle can also be initialized by passing an params object. The image needs to pe passed asimageproperty.

Canvas Width and Height

The size of thecanvascan be adjusted bydata-widthanddata-height.

The particle image within the canvas tries to be as big as possible while keeping its aspect ratio, but will not get bigger than the natural size of the source image.

Please note: The canvas size also affects the render performance - even when the amount of rendered particles is not changed.

Particle Image Width and Height

The size of the particle image can be controlled bydata-min-width,data-min-height,data-max-widthanddata-max-height.

With theminsizes the image can be stretched above its natural source image size.

Themaxsizes limit the image size within the canvas.

The sizes can all also be passed as relative to the current canvas size by passing%values.

Particle Gap

Theparticle-gapattributes defines the space between particles. The minimum value is1. With this setting, the particles are all next to each other.


Please note: The performance is massively depending on the amount of particles - the higher you choose the gap between particles the smoother the animation will run.


Thegravitydefines the force which makes the particle going back to its origin position and also affects the moving speed.



The particles can be tinted with thecolorattribute. This overrides any color given by the provided image.


Mouse Force

Themouse-forcedefines how many pixels the sourrounding particles get pushed away. You can also use negative numbers to attract particles instead of pushing them.



The particles are constantly moving with default settings. The strength of this movement can be ajusted with thenoiseattribute. The particles are moving faster and for a larger distance with a higher number. The movement can be completely disabled by setting it to0but this is not recommended.


Disable Interaction

The Interaction with cursor or touch events can be disabled by settingdisable-interactiontotrue.



Since Version 1.1 NextParticle also supports WebGL rendering. To enable this you need to set therendererattribute towebgl. You can do this either by data attributes or by js.


WebGL also enables multiple new settings wich are not available with thedefaultrenderer.

Changes the size of the particles - values should not be lower then0.5and not higher then5.


WebGL renders the particles within an 3D space internally. This allows to render particles in multiple layers. Please note: High numbers of layers decreases the performance.


Thedepthcontrols the distance between and the distance to the background.


Life Cycle

With WebGL enabled you can give the particles an life cycle. This means an particle grows at it source position, waits then and shrinks afterwards. The shrink can have an distance from the center.






Init & Fade Animations

The initial and the fading particles position can be set byinit-position,init-direction,fade-positionandfade-direction

The possible values arerandom,top,left,bottom,rightandnone.


Please note: Click on the image to see the animation.

Responsive Full size canvas

The width and height can be set while the animation is already runnung, but.start()needs to be called to apply the changes.

Javascript Events

The animation can be controlled by.start()and.stop(). When the animation has completed the stopping animation it triggers the'stopped'callback.

Install Wordpress Plugin

Click onPlugins->Add Newto start the Plugin installation.

Click onUpload Plugin.

Click onChoose file.

Click onInstall Now.

Click onActivate Plugin.

The Plugin should now be listed as seen on the screenshot.

Use Wordpress Plugin

You can use the NextParticle Plugin everywhere where you can embed an image. Edit for example an existing page and click onAdd Mediaand add the image you want to use for NextParticle.

Select the inserted image and click on the edit icon.

Every image has now anNextParticlesection where you can enable the effect and tweak some properties.

The admin page will still view the image. You can save now the page and take a look on the blog page to see the effect.

Made with fun by NextCodeContactLegal Notice