# vincentgarreau/particles.js architecture

> Architecture diagram of the GitHub repository vincentgarreau/particles.js, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vincentgarreau/particles.js
- Repository: https://github.com/vincentgarreau/particles.js

## Overview

particles.js is a browser-side canvas particle-animation library. A page configures or loads particle options, initializes a canvas instance, and the runtime creates, updates, and draws particles; mouse and resize events enable interactive effects. The README also documents an external configuration generator. The runtime is implemented in one source file, so nodes represent responsibilities within that file rather than separate modules; unsampled implementation details and demo wiring are not asserted.

Main entry points: [`particles.js`](https://github.com/vincentgarreau/particles.js/blob/master/particles.js) (Particle updates)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_setup["Setup and configuration"]
  node_options["Particle options"]
  node_api["Public API<br/>[particles.js]"]
  node_config_loader["Config loader<br/>[particles.js]"]
  node_canvas_setup["Canvas setup<br/>[particles.js]"]
end

subgraph group_runtime["Particle runtime"]
  node_canvas["Canvas element"]
  node_particle_creation["Particle creation<br/>[particles.js]"]
  node_particle_update["Particle updates<br/>[particles.js]"]
  node_particle_drawing["Particle drawing<br/>[particles.js]"]
  node_line_links["Particle links<br/>[particles.js]"]
  node_motion["Particle motion<br/>[particles.js]"]
end

subgraph group_interaction["Interaction"]
  node_mouse_events["Mouse events<br/>[particles.js]"]
  node_interaction_modes["Interaction modes<br/>[particles.js]"]
  node_resize["Resize handling<br/>[particles.js]"]
end

node_page(("Web page"))
node_generator["Config generator"]

node_page -->|"loads library"| node_api
node_page -->|"configures"| node_options
node_page -->|"requests config"| node_config_loader
node_config_loader -->|"loads options"| node_options
node_api -.->|"initializes canvas"| node_canvas_setup
node_canvas_setup -->|"creates canvas"| node_canvas
node_canvas_setup -.->|"starts runtime"| node_particle_creation
node_particle_creation -->|"creates particles"| node_particle_drawing
node_particle_update -.->|"draws particles"| node_particle_drawing
node_particle_update -->|"links particles"| node_line_links
node_particle_update -.->|"applies motion"| node_motion
node_mouse_events -.->|"dispatches effects"| node_interaction_modes
node_resize -->|"resizes canvas"| node_canvas
node_generator -.->|"exports configuration"| node_options

click node_api "https://github.com/vincentgarreau/particles.js/blob/master/particles.js"
click node_config_loader "https://github.com/vincentgarreau/particles.js/blob/master/particles.js"
click node_canvas_setup "https://github.com/vincentgarreau/particles.js/blob/master/particles.js"
click node_particle_creation "https://github.com/vincentgarreau/particles.js/blob/master/particles.js"
click node_particle_update "https://github.com/vincentgarreau/particles.js/blob/master/particles.js"
click node_particle_drawing "https://github.com/vincentgarreau/particles.js/blob/master/particles.js"
click node_line_links "https://github.com/vincentgarreau/particles.js/blob/master/particles.js"
click node_motion "https://github.com/vincentgarreau/particles.js/blob/master/particles.js"
click node_mouse_events "https://github.com/vincentgarreau/particles.js/blob/master/particles.js"
click node_interaction_modes "https://github.com/vincentgarreau/particles.js/blob/master/particles.js"
click node_resize "https://github.com/vincentgarreau/particles.js/blob/master/particles.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_options,node_api,node_config_loader,node_canvas_setup toneBlue
class node_canvas,node_particle_creation,node_particle_update,node_particle_drawing,node_line_links,node_motion toneAmber
class node_mouse_events,node_interaction_modes,node_resize toneMint
class node_page,node_generator toneIndigo
```

## Components

### Setup and configuration

- **Particle options**
- [Public API](https://github.com/vincentgarreau/particles.js/blob/master/particles.js): `particles.js`
- [Config loader](https://github.com/vincentgarreau/particles.js/blob/master/particles.js): `particles.js`
- [Canvas setup](https://github.com/vincentgarreau/particles.js/blob/master/particles.js): `particles.js`

### Particle runtime

- **Canvas element**
- [Particle creation](https://github.com/vincentgarreau/particles.js/blob/master/particles.js): `particles.js`
- [Particle updates](https://github.com/vincentgarreau/particles.js/blob/master/particles.js): `particles.js`
- [Particle drawing](https://github.com/vincentgarreau/particles.js/blob/master/particles.js): `particles.js`
- [Particle links](https://github.com/vincentgarreau/particles.js/blob/master/particles.js): `particles.js`
- [Particle motion](https://github.com/vincentgarreau/particles.js/blob/master/particles.js): `particles.js`

### Interaction

- [Mouse events](https://github.com/vincentgarreau/particles.js/blob/master/particles.js): `particles.js`
- [Interaction modes](https://github.com/vincentgarreau/particles.js/blob/master/particles.js): `particles.js`
- [Resize handling](https://github.com/vincentgarreau/particles.js/blob/master/particles.js): `particles.js`

### Other components

- **Web page**
- **Config generator**

## Connections

- Web page → Public API: loads library (evidence: `README.md`)
- Web page → Particle options: configures (evidence: `README.md`)
- Web page → Config loader: requests config (evidence: `README.md`)
- Config loader → Particle options: loads options (evidence: `README.md`)
- Public API → Canvas setup: initializes canvas (evidence: `particles.js`)
- Canvas setup → Canvas element: creates canvas (evidence: `particles.js`)
- Canvas setup → Particle creation: starts runtime (evidence: `particles.js`)
- Particle creation → Particle drawing: creates particles (evidence: `particles.js`)
- Particle updates → Particle drawing: draws particles (evidence: `particles.js`)
- Particle updates → Particle links: links particles (evidence: `particles.js`)
- Particle updates → Particle motion: applies motion (evidence: `particles.js`)
- Mouse events → Interaction modes: dispatches effects (evidence: `particles.js`)
- Resize handling → Canvas element: resizes canvas (evidence: `particles.js`)
- Config generator → Particle options: exports configuration (evidence: `README.md`)