A Lightweight JavaScript Plugin for Particle Backgrounds | ak-kaleidoscope

Ak-kaleidoscope is a lightweight javascript plugin for particle backgrounds. This plugin is an additional component of customizable particles so far to create an overview of an animated interactive background that responds to mouse transfer events.

kaleidoscope animation css, javascript kaleidoscope, css kaleidoscope, jquery kaleidoscope, what is kaleidoscope in canvas, what is javascript in html

More features:

  • 8 shapes: “circle”, drop, “heart”, “oval”, “box”, “star”, “triangle” or “wave”.
  • Allows you to select the minimum / maximum particle size.
  • Allows you to select the number of particles and mirrors.
  • Allows you to apply random colors to particles.
  • Speed for configurable.

A Lightweight and Powerful Particle Animation Javascript Library | Proton.js

How to make use of it:

1. Load the minified model of the ak-kaleidoscope plugin from the dist folder.

<script src="dist/kaleidoscope.min.js"></script>

2. Create an HTML canvas on which you wish to render the interactive particle background.

<canvas id="kaleidoscope"></canvas>

3. Make the canvas completely positioned.

.kaleidoscope {
  position: absolute;
  display: block;
  top: 0;
  left: 0;

4. Initialize the plugin to create a default particle background.

const myBg = new Kaleidoscope({
      selector: '#kaleidoscope'

5. Determine the variety of particles & mirrors.

new Kaleidoscope({
    selector: '#kaleidoscope',
    edge: 10,
    quantity: 50

6. Override the default shapes used for the particles.

new Kaleidoscope({
    selector: '#kaleidoscope',
    shapes: ['circle', drop, 'heart', 'oval', 'square', 'star', 'triangle', 'wave']

7. Set the min/max dimension of the particles.

new Kaleidoscope({
    selector: '#kaleidoscope',
    minSize: 30,
    maxSize: 50

8. Specify an array of colors for the particles.

new Kaleidoscope({
    selector: '#kaleidoscope',
    color: ['#FFD1B9', '#564138', '#2E86AB', '#F5F749', '#F24236']

9. Determine the motion velocity from 0 to 1.

new Kaleidoscope({
    selector: '#kaleidoscope',
    speed: .3

10. Set the kind of compositing operation to use when drawing new shapes.

new Kaleidoscope({
    selector: '#kaleidoscope',
    globalCompositeOperation: 'overlay'

11. Pause & resume the animation.


12. Destroy the occasion.



selectorstringRequired: The CSS selector of your canvas element
edgenumber10Optional: Amount of mirrors
shapesstring[]['square', 'circle', 'wave']Optional: Shapes of the particles. Choose from 'circle'drop'heart''oval''square''star''triangle' or 'wave'
minSizenumber30Optional: Minimum amount of size of the particles
maxSizenumber50Optional: Maximum amount of size of the particles
colorstring[]['#FFD1B9', '#564138', '#2E86AB', '#F5F749', '#F24236']Optional: Colors of the particles
globalCompositeOperationstring'overlay'Optional: Type of compositing operation to apply when drawing particles. Same as MDN
quantitynumber50Optional: Amount of particles
speednumber (0 to 1)0.3Optional: Movement speed of the particles


pauseAnimationPauses/stops the particle animation
resumeAnimationContinues the particle animation
destroyDestroys the plugin

Create An Interactive Particle Background, ak-kaleidoscope Plugin/Github

See Demo And Download

Official Website(kawakamiakari): Click Here

This superior jQuery/javascript plugin is developed by kawakamiakari. For extra Advanced Usages, please go to the official website.

Related Posts


Animated Calendar UI Design Using HTML CSS JavaScript

Calendar UI design with dark mode and animations using HTML CSS JavaScript. An elegant, animated, and lightweight (or bold) calendar user interface design implemented in HTML, JS,…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


A Lightweight and Customizable WYSIWYG Editor In Pure JavaScript | SunEditor

WYSIWYG HTML editor based on pure JavaScript, suneditor is a lightweight, versatile, customizable, pure JavaScript WYSIWYG textual content(text) editor in your web functions. Key Features:  Paste from…


Vue.js Directive To Lock Body Scroll Without Breaking Scroll

v-scroll-lock is a Vue.js directive to lock body scrolling (for iOS mobile and tablet, Android and Safari/Chrome/Firefox for desktop) without breaking the scrolling of the target element….


Jquery Plugin To Adjusting Text Color To Background Color

Adjust-Text-To-Background.js is a jQuery plugin to set the text color to the background color. If the background color is brighter, the script will change the text color…