### Install particles.js with npm

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Use npm to install the particles.js library for your project. This is a common method for managing JavaScript dependencies.

```bash
npm install particles.js
```

--------------------------------

### Install particles.js with Bower

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Install particles.js using Bower, a package manager for the web. Ensure you save the dependency to your project's configuration.

```bash
bower install particles.js --save
```

--------------------------------

### Add particles.js package for Meteor

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Install the particles.js package for Meteor applications using the Meteor package manager. This command adds the package to your Meteor project.

```bash
meteor add newswim:particles
```

--------------------------------

### particlesJS Initialization

Source: https://context7.com/vincentgarreau/particles.js/llms.txt

Initializes the particle system on a specified DOM element with inline configuration.

```APIDOC
## particlesJS

### Description
The main initialization function that creates a particle system on a specified DOM element. It accepts a target element ID and a configuration object defining particle appearance, behavior, and interactivity settings.

### Method
JavaScript Function Call

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **elementId** (string) - Required - The ID of the DOM element where particles will be rendered.
- **config** (object) - Required - An object containing the configuration for the particle system.

### Request Example
```html
<!-- HTML Setup -->
<div id="particles-js"></div>
<script src="particles.js"></script>

<script>
// Initialize particles with inline configuration
particlesJS('particles-js', {
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8
      },
      "repulse": {
        "distance": 200
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});
</script>
```

### Response
#### Success Response (200)
N/A (This is a client-side initialization function, it does not return a value in the traditional sense but modifies the DOM.)

#### Response Example
None
```

--------------------------------

### Configure particle movement

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Enable particle movement and set its speed and direction. Options include 'none' or specific directions like 'top', 'right', etc.

```json
"particles.move.enable": true
```

```json
"particles.move.speed": 4
```

```json
"particles.move.direction": "none"
```

```json
"particles.move.direction": "top"
```

```json
"particles.move.direction": "top-right"
```

```json
"particles.move.direction": "right"
```

```json
"particles.move.direction": "bottom-right"
```

```json
"particles.move.direction": "bottom"
```

```json
"particles.move.direction": "bottom-left"
```

```json
"particles.move.direction": "left"
```

```json
"particles.move.direction": "top-left"
```

--------------------------------

### Configure particle size animation

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Enable and configure animation for particle size, including speed and minimum size reached during animation. Sync option controls if all particles animate together.

```json
"particles.size.anim.enable": true
```

```json
"particles.size.anim.speed": 3
```

```json
"particles.size.anim.size_min": 0.25
```

```json
"particles.size.anim.sync": true
```

--------------------------------

### Configure particle opacity animation

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Enable and configure animation for particle opacity, including speed and minimum opacity reached during animation. Sync option controls if all particles animate together.

```json
"particles.opacity.anim.enable": true
```

```json
"particles.opacity.anim.speed": 3
```

```json
"particles.opacity.anim.opacity_min": 0.25
```

```json
"particles.opacity.anim.sync": true
```

--------------------------------

### Full HTML Integration with Particles.js

Source: https://context7.com/vincentgarreau/particles.js/llms.txt

This snippet shows a complete HTML file structure for integrating particles.js. It includes basic HTML, CSS for layout and styling, and JavaScript to initialize the particles and update their count. Ensure particles.min.js is in the same directory or adjust the script path.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Particles.js Demo</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    #particles-js {
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: #0d1117;
      z-index: -1;
    }
    .content {
      position: relative;
      z-index: 1;
      color: white;
      padding: 50px;
      text-align: center;
    }
    .particle-count {
      position: fixed;
      top: 10px;
      right: 10px;
      color: #fff;
      font-size: 14px;
      background: rgba(0,0,0,0.5);
      padding: 10px;
      border-radius: 5px;
    }
  </style>
</head>
<body>

<div id="particles-js"></div>

<div class="content">
  <h1>Welcome to My Website</h1>
  <p>Content goes here with particle background</p>
</div>

<div class="particle-count">
  Particles: <span id="count">0</span>
</div>

<script src="particles.min.js"></script>
<script>
  particlesJS('particles-js', {
    "particles": {
      "number": { "value": 80, "density": { "enable": true, "value_area": 800 } },
      "color": { "value": "#58a6ff" },
      "shape": { "type": "circle" },
      "opacity": { "value": 0.5, "random": true },
      "size": { "value": 3, "random": true },
      "line_linked": { "enable": true, "distance": 150, "color": "#58a6ff", "opacity": 0.2, "width": 1 },
      "move": { "enable": true, "speed": 2, "direction": "none", "random": true, "out_mode": "out" }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": { "enable": true, "mode": "grab" },
        "onclick": { "enable": true, "mode": "push" },
        "resize": true
      },
      "modes": {
        "grab": { "distance": 140, "line_linked": { "opacity": 0.5 } },
        "push": { "particles_nb": 4 }
      }
    },
    "retina_detect": true
  });

  // Update particle count display
  setInterval(function() {
    if (window.pJSDom[0] && window.pJSDom[0].pJS.particles) {
      document.getElementById('count').innerText =
        window.pJSDom[0].pJS.particles.array.length;
    }
  }, 100);
</script>

</body>
</html>
```

--------------------------------

### Initialize and Update Particle System

Source: https://github.com/vincentgarreau/particles.js/blob/master/demo/index.html

This snippet initializes performance statistics, appends them to the DOM, and sets up a continuous update loop. The loop measures performance using Stats.js and updates a counter with the number of active particles. It requires the Stats.js library and assumes a pJSDom object is available in the global scope.

```javascript
var count_particles, stats, update;

stats = new Stats;

stats.setMode(0);

stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';

document.body.appendChild(stats.domElement);


count_particles = document.querySelector('.js-count-particles');


update = function() {

  stats.begin();

  stats.end();

  if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
    count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
  }

  requestAnimationFrame(update);

};

requestAnimationFrame(update);
```

--------------------------------

### particlesJS.load Configuration Loading

Source: https://context7.com/vincentgarreau/particles.js/llms.txt

Loads particle configuration from an external JSON file asynchronously.

```APIDOC
## particlesJS.load

### Description
Loads particle configuration from an external JSON file. This method fetches the configuration asynchronously and initializes the particle system once loaded. Useful for keeping configuration separate from code.

### Method
JavaScript Function Call

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **elementId** (string) - Required - The ID of the DOM element where particles will be rendered.
- **jsonPath** (string) - Required - The path to the external JSON configuration file.
- **callback** (function) - Optional - A callback function to be executed after the configuration is loaded and particles are initialized.

### Request Example
```javascript
// Load configuration from external JSON file
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('particles.js config loaded successfully');
});
```

### Response
#### Success Response (200)
N/A (This is a client-side initialization function, it does not return a value in the traditional sense but modifies the DOM.)

#### Response Example
None
```

--------------------------------

### Access and Control pJSDom Instances

Source: https://context7.com/vincentgarreau/particles.js/llms.txt

Programmatically control particle systems after initialization by accessing instances via the global `pJSDom` array. This allows for dynamic manipulation of particle count, position, and system state.

```javascript
// Initialize particles
particlesJS('particles-js', { /* config */ });

// Access particle instance
var particleInstance = window.pJSDom[0].pJS;

// Get current particle count
console.log('Particle count:', particleInstance.particles.array.length);

// Access canvas dimensions
console.log('Canvas size:', particleInstance.canvas.w, 'x', particleInstance.canvas.h);

// Programmatically add particles at position
particleInstance.fn.modes.pushParticles(10, {
  pos_x: particleInstance.canvas.w / 2,
  pos_y: particleInstance.canvas.h / 2
});

// Remove particles
particleInstance.fn.modes.removeParticles(5);

// Refresh/restart particle system
particleInstance.fn.particlesRefresh();

// Empty all particles
particleInstance.fn.particlesEmpty();

// Export canvas as image
particleInstance.fn.vendors.exportImg();

// Destroy particle instance
particleInstance.fn.vendors.destroypJS();
```

--------------------------------

### Configure grab mode interactivity

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Set the distance for the 'grab' mode, where particles are attracted to the mouse cursor, and the opacity of the connecting lines.

```json
"interactivity.events.modes.grab.distance": 100
```

```json
"interactivity.events.modes.grab.line_linked.opacity": 0.75
```

--------------------------------

### Configure Interactivity Modes

Source: https://context7.com/vincentgarreau/particles.js/llms.txt

Enable mouse interactions like 'grab', 'bubble', 'repulse', 'push', and 'remove'. Configure the detection area ('canvas' or 'window') and specific parameters for each interaction mode.

```javascript
particlesJS('particles-js', {
  "particles": {
    "number": { "value": 100 },
    "color": { "value": "#ffffff" },
    "shape": { "type": "circle" },
    "size": { "value": 5 },
    "move": { "enable": true, "speed": 3 }
  },
  "interactivity": {
    "detect_on": "canvas",  // "canvas" or "window"
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"  // "grab", "bubble", "repulse", or array ["grab", "bubble"]
      },
      "onclick": {
        "enable": true,
        "mode": "push"  // "push", "remove", "bubble", "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 200,
        "line_linked": {
          "opacity": 0.8
        }
      },
      "bubble": {
        "distance": 250,
        "size": 40,
        "duration": 2,
        "opacity": 0.8,
        "speed": 3
      },
      "repulse": {
        "distance": 150,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});
```

--------------------------------

### Initialize ParticlesJS with Inline Configuration

Source: https://context7.com/vincentgarreau/particles.js/llms.txt

Use this method to initialize particlesJS directly within your HTML file. It requires the ID of the DOM element where particles will be rendered and a JavaScript object containing the configuration settings.

```html
<!-- HTML Setup -->
<div id="particles-js"></div>
<script src="particles.js"></script>

<script>
// Initialize particles with inline configuration
particlesJS('particles-js', {
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8
      },
      "repulse": {
        "distance": 200
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});
</script>
```

--------------------------------

### Configure particle opacity

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Set the default opacity of particles and whether it should be randomized. Opacity ranges from 0 to 1.

```json
"particles.opacity.value": 0.75
```

```json
"particles.opacity.random": true
```

--------------------------------

### Configure interactivity detect on

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Specify the element on which interactivity events should be detected. Options are 'canvas' or 'window'.

```json
"interactivity.detect_on": "canvas"
```

```json
"interactivity.detect_on": "window"
```

--------------------------------

### Load particles.js Configuration

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Use this JavaScript snippet to load the particles.js library and its configuration from a JSON file. A callback function can be provided for post-load actions.

```javascript
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});
```

--------------------------------

### Configure repulse mode interactivity

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Set the distance and duration for the 'repulse' mode, where particles are pushed away from the mouse cursor.

```json
"interactivity.events.modes.repulse.distance": 200
```

```json
"interactivity.events.modes.repulse.duration": 1.2
```

--------------------------------

### Configure push mode interactivity

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Set the number of particles to add to the canvas when the 'push' mode is activated by a click.

```json
"interactivity.events.modes.push.particles_nb": 4
```

--------------------------------

### Configure bubble mode interactivity

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Set the distance, size, and duration for the 'bubble' mode, where particles expand and contract around the mouse cursor.

```json
"interactivity.events.modes.bubble.distance": 100
```

```json
"interactivity.events.modes.bubble.size": 40
```

```json
"interactivity.events.modes.bubble.duration": 0.4
```

--------------------------------

### Configure random and straight particle movement

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Control whether particle movement is random or straight. 'Random' allows for varied movement paths, while 'straight' enforces a consistent direction.

```json
"particles.move.random": true
```

```json
"particles.move.straight": true
```

--------------------------------

### Configure resize interactivity events

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Enable or disable interactivity events when the window is resized. This ensures the particle effect adapts to different screen sizes.

```json
"interactivity.events.resize": true
```

--------------------------------

### Configure image shape source and dimensions

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Specify the source path for image-based particles and their width and height. This is used when `particles.shape.type` is 'image'.

```json
"particles.shape.image.src": "assets/img/yop.svg"
```

```json
"particles.shape.image.width": 100
```

```json
"particles.shape.image.height": 100
```

--------------------------------

### Configure line linking between particles

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Enable or disable the lines connecting particles and set their distance, color, and width. This creates a network effect between particles.

```json
"particles.line_linked.enable": true
```

```json
"particles.line_linked.distance": 150
```

```json
"particles.line_linked.color": "#ffffff"
```

```json
"particles.line_linked.opacity": 0.5
```

```json
"particles.line_linked.width": 1.5
```

--------------------------------

### Load ParticlesJS Configuration from External JSON

Source: https://context7.com/vincentgarreau/particles.js/llms.txt

This method loads particle configurations asynchronously from a JSON file. It's useful for separating configuration from your main JavaScript code. A callback function can be provided to execute code after the configuration is loaded.

```javascript
// Load configuration from external JSON file
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('particles.js config loaded successfully');
});
```

```json
// particles.json - Configuration file example
{
  "particles": {
    "number": {
      "value": 100,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ff0000"
    },
    "shape": {
      "type": "circle"
    },
    "opacity": {
      "value": 0.7
    },
    "size": {
      "value": 3,
      "random": true
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ff0000",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 4
    }
  },
  "interactivity": {
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      }
    }
  },
  "retina_detect": true
}
```

--------------------------------

### HTML Structure for particles.js

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

This HTML snippet shows the basic structure required to use particles.js. It includes a div element to hold the particles and a script tag to load the library.

```html
<div id="particles-js"></div>

<script src="particles.js"></script>
```

--------------------------------

### Configure particle attract movement

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Enable attraction forces that influence particle movement, such as rotation around X and Y axes. This can create swirling or complex motion patterns.

```json
"particles.move.attract.enable": true
```

```json
"particles.move.attract.rotateX": 3000
```

```json
"particles.move.attract.rotateY": 1500
```

--------------------------------

### Configure hover interactivity events

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Enable and define the mode for interactivity events triggered when hovering over the canvas. Modes include 'grab', 'bubble', or 'repulse'.

```json
"interactivity.events.onhover.enable": true
```

```json
"interactivity.events.onhover.mode": "grab"
```

```json
"interactivity.events.onhover.mode": "bubble"
```

```json
"interactivity.events.onhover.mode": "repulse"
```

```json
"interactivity.events.onhover.mode": ["grab", "bubble"]
```

--------------------------------

### Configure particle size

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Set the default size of particles and whether it should be randomized. This option controls the visual size of each particle.

```json
"particles.size.value": 20
```

```json
"particles.size.random": true
```

--------------------------------

### Configure particle density

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Enable or disable particle density calculation and set the area value for density. This affects how particles are distributed.

```json
"particles.number.density.enable": true
```

```json
"particles.number.density.value_area": 800
```

--------------------------------

### Configure click interactivity events

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Enable and define the mode for interactivity events triggered when clicking on the canvas. Modes include 'push', 'remove', 'bubble', or 'repulse'.

```json
"interactivity.events.onclick.enable": true
```

```json
"interactivity.events.onclick.mode": "push"
```

```json
"interactivity.events.onclick.mode": "remove"
```

```json
"interactivity.events.onclick.mode": "bubble"
```

```json
"interactivity.events.onclick.mode": "repulse"
```

```json
"interactivity.events.onclick.mode": ["push", "repulse"]
```

--------------------------------

### Configure particle out of canvas mode

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Define the behavior of particles when they move out of the canvas boundaries. Options include 'out' (disappear) or 'bounce' (rebound).

```json
"particles.move.out_mode": "out"
```

```json
"particles.move.out_mode": "bounce"
```

--------------------------------

### Configure particle bounce between particles

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Enable or disable bouncing behavior between particles. When enabled, particles will repel each other upon collision.

```json
"particles.move.bounce": true
```

--------------------------------

### Configure Particle Animations

Source: https://context7.com/vincentgarreau/particles.js/llms.txt

Control particle animations including opacity fading, size pulsing, and movement patterns. Specify direction, speed, and whether movement is random or straight. Out-of-bounds behavior can be set to 'out' or 'bounce'.

```javascript
particlesJS('particles-js', {
  "particles": {
    "number": { "value": 60 },
    "opacity": {
      "value": 0.8,
      "random": true,
      "anim": {
        "enable": true,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 8,
      "random": true,
      "anim": {
        "enable": true,
        "speed": 10,
        "size_min": 1,
        "sync": false
      }
    },
    "move": {
      "enable": true,
      "speed": 4,
      "direction": "top",  // "none", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left"
      "random": false,
      "straight": false,
      "out_mode": "bounce",  // "out" or "bounce"
      "bounce": true,  // Between particles
      "attract": {
        "enable": true,
        "rotateX": 3000,
        "rotateY": 1500
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 200,
      "color": "#00ff00",
      "opacity": 0.6,
      "width": 2
    }
  }
});
```

--------------------------------

### Configure particles.js number of particles

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Set the number of particles to display on the canvas. This option controls the density of the particle effect.

```json
"particles.number.value": 40
```

--------------------------------

### particles.json Configuration

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

This JSON object defines the configuration for particles.js, controlling various aspects of particle behavior, appearance, and interactivity.

```json
{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 80,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 300,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 12,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 800,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 800,
        "size": 80,
        "duration": 2,
        "opacity": 0.8,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
```

--------------------------------

### Configure Particle Shapes

Source: https://context7.com/vincentgarreau/particles.js/llms.txt

Set the shape of particles, supporting single types like 'polygon' or multiple types in an array. Configure stroke color and width, or specify parameters for polygon shapes and custom image sources.

```javascript
particlesJS('particles-js', {
  "particles": {
    "number": { "value": 50 },
    "shape": {
      // Single shape
      "type": "polygon",
      // Or multiple shapes: "type": ["circle", "triangle", "star"],
      "stroke": {
        "width": 2,
        "color": "#ff0000"
      },
      "polygon": {
        "nb_sides": 6  // Hexagon
      },
      // For image shapes
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "color": {
      // Single color
      "value": "#ffffff"
      // Or multiple colors: "value": ["#ff0000", "#00ff00", "#0000ff"]
      // Or random: "value": "random"
      // Or RGB: "value": {"r": 255, "g": 100, "b": 50}
      // Or HSL: "value": {"h": 200, "s": 50, "l": 50}
    },
    "size": {
      "value": 10,
      "random": true
    },
    "move": { "enable": true, "speed": 3 }
  }
});
```

--------------------------------

### Configure retina detection

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Enable or disable retina display detection. When enabled, the canvas resolution will be adjusted for high-density displays to ensure crisp rendering.

```json
"retina_detect": true
```

```json
"retina_detect": false
```

--------------------------------

### Configure particle color

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Define the color of the particles. Supports HEX, RGB, HSL, an array of HEX values, or the string 'random' for random colors.

```json
"particles.color.value": "#b61924"
```

```json
"particles.color.value": {r:182, g:25, b:36}
```

```json
"particles.color.value": {h:356, s:76, l:41}
```

```json
"particles.color.value": ["#b61924", "#333333", "999999"]
```

```json
"particles.color.value": "random"
```

--------------------------------

### Configure polygon shape sides

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Set the number of sides for polygon-shaped particles. This option is only relevant when `particles.shape.type` is set to 'polygon'.

```json
"particles.shape.polygon.nb_slides": 5
```

--------------------------------

### Configure particle shape type

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Set the type of shape for the particles. Can be a single string or an array of strings for random selection among specified shapes.

```json
"particles.shape.type": "circle"
```

```json
"particles.shape.type": "edge"
```

```json
"particles.shape.type": "triangle"
```

```json
"particles.shape.type": "polygon"
```

```json
"particles.shape.type": "star"
```

```json
"particles.shape.type": "image"
```

```json
"particles.shape.type": ["circle", "triangle", "image"]
```

--------------------------------

### Configure particle shape stroke

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

Define the width and color of the stroke around particle shapes. This applies to shapes that support strokes.

```json
"particles.shape.stroke.width": 2
```

```json
"particles.shape.stroke.color": "#222222"
```

--------------------------------

### Add particles.js gem for Rails

Source: https://github.com/vincentgarreau/particles.js/blob/master/README.md

For Ruby on Rails projects, you can add particles.js as a gem to manage assets. This integrates the library into the Rails asset pipeline.

```ruby
gem 'rails-assets-particles.js'
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.