Particler plugin v2.0

The Envato logo


Live long and prosper

Something abstract

The world map

Good for full screen, stretch and big grid size

Grid Start Zoom Enabled
Grid Start Zoom
Start Zoom Speed
Particle Size
Grid Size
Explode effect
Zoom effect
Zoom Value
Effects Radius
Randomize Grid
Circle Motion Speed
Circle Motion Radius
Full Screen Mode
Stretch img
Reset settings

How to use?

Just setup Particler on this page and include the code below to your page!

Don't forget to change img path to your own image!

<script src="/path/to/particler.js"></script>

<canvas width="900px" height="600px" id="canvas"></canvas>

var options = {{optionsToDisplay|json}};
var canvas = document.getElementById('canvas');
var particler = new Particler(canvas, options);;


Option Datatype Default Description
img string Path to the source image. Required param.
Please note: your image and your website must be located on the same address by security reasons. For example: and
mousemoveBehavior boolean false Enables reaction to user's cursor.
New in 1.1 version
mouseoverRadius number 200 Maximum distance from cursor to point. Only points inside the circle with center at cursor coordinates and radius mouseoverRadius will be affected.
New in 1.1 version
mouseoverPointRandomDistance number 120 Maximum possible displacement of points on mouseover.
New in 1.1 version
mouseoverRadiusMaxDelta number 10 Maximum delta of point rotation circle radius on mouseover.
New in 1.1 version
sizeMin number 4 Minimum particle size. Must be greather than 0.
sizeMax number 7 Maximum particle size. Must be greather or equal to minSize. Particles will have size between the sizeMin and sizeMax values.
sizeChangeStep number 0.1 Step of changing the size of each particle between sizeMin and sizeMax values.
shape string circle Particle shape. Available values: circle, square, star, heart, cross.
gridSize number 7 Distance between particles. Highly reccomended to be greater or equal to sizeMax option.
gridStartZoomEnabled boolean false Enables grid zooming animation on start
gridStartZoom number 1 Initial particle and grid size will be multiplied by this parameter. Then size will be gradually decreased to this original value. Set value 1 to disable this effect.
gridStartZoomSpeed number 0.1 Speed of decreasing of the size of each particle when gridStartZoom is greater than 1. Example: 0.1 (slow), 0.5 (faster), 1 (very fast).
circleMotionSpeedMin number 0.1 Minimum speed of particle circular movement.
circleMotionSpeedMax number 0.5 Maximum speed of particle circular movement. Final circular movement speed value will be between circleMotionSpeedMin and circleMotionSpeedMax.
circleMotionRadiusMin number 1 Particle moves in a circle. This is minimum circle radius.
circleMotionRadiusMax number 15 This is maximum circle radius. Final circle motion radius will be between circleMotionRadiusMin and circleMotionRadiusMax.
offset:number object { left: 10, top: 10 } Left top corner offset of the image. Use it when canvas size is much greater than image.
ignoreWhite:boolean number true Ignore white pixels of image. Disable it when you have white image on transparent background.
fps number 30 Scene drawing frequency, frames per second
fullScreen boolean false Draw canvas to full screen
fullScreenStretch boolean false Stretch the image to window's size
zoomOnHover boolean true Scale particles on hover
zoomOnHoverDelta number 10 Zooming force


Method Description
run() Runs the animation.
restart() Restarts the animation.
destroy() Cancels animation loop, clears canvas.
After destroy Particler object must be recreated.

Contact author