JSPM

tsparticles

1.5.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 64255
  • Score
    100M100P100Q152486F
  • License MIT

Porting of Vincent Garreau's particles.js, converted in TypeScript.

Package Exports

  • tsparticles
  • tsparticles/dist/Classes/Container
  • tsparticles/dist/Enums/InteractivityDetect
  • tsparticles/dist/Enums/MoveDirection
  • tsparticles/dist/Enums/OutMode
  • tsparticles/dist/Enums/ProcessBubbleType
  • tsparticles/dist/Enums/ShapeType

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tsparticles) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

TypeScript Particles

tsparticles

CodeFactor Codacy Badge Code Inspector Code Inspector

A lightweight TypeScript library for creating particles

Particles.js converted in TypeScript

Branch Build Status
Master Master Build Status
Dev Dev Build Status

Packages install

npm

npmjs

npm install tsparticles

Hosting / CDN

Please use this host or your own to load tsparticles on your projects

jsDelivr

Usage

Load tsParticles and configure the particles:

index.html

<div id="tsparticles"></div>

<script src="tsparticles.min.js"></script>

app.js

/* tsParticles.load(@dom-id, @path-json, @callback (optional)); */
tsParticles.loadJSON("tsparticles", "assets/particles.json").then(() => {
  console.log("callback - tsparticles config loaded");
}).catch((error) => {
  console.error(error);
});

//or

/* tsParticles.load(@dom-id, @options); */
tsParticles.load("tsparticles", { /* options here */ });

Demo / Generator

Particles Generator

https://tsparticles.matteobruni.it/demo/


particles.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
}

Options

key option type / notes example
particles.number.value number 40
particles.number.density.enable boolean true / false
particles.number.density.value_area number 800
particles.color.value HEX (string)
RGB (object)
HSL (object)
array selection (HEX)
random (string)
"#b61924"
{r:182, g:25, b:36}
{h:356, s:76, l:41}
["#b61924", "#333333", "999999"]
"random"
particles.shape.type string
array selection
"circle"
"line"
"edge"
"triangle"
"polygon"
"star"
"image"
["circle", "triangle", "image"]
particles.shape.stroke.width number 2
particles.shape.stroke.color HEX (string) "#222222"
particles.shape.polygon.nb_sides number 5
particles.shape.image.src path link
svg / png / gif / jpg
"assets/img/yop.svg"
"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.width number
(for aspect ratio)
100
particles.shape.image.height number
(for aspect ratio)
100
particles.opacity.value number (0 to 1) 0.75
particles.opacity.random boolean true / false
particles.opacity.anim.enable boolean true / false
particles.opacity.anim.speed number 3
particles.opacity.anim.opacity_min number (0 to 1) 0.25
particles.opacity.anim.sync boolean true / false
particles.size.value number 20
particles.size.random boolean true / false
particles.size.anim.enable boolean true / false
particles.size.anim.speed number 3
particles.size.anim.size_min number 0.25
particles.size.anim.sync boolean true / false
particles.line_linked.enable boolean true / false
particles.line_linked.distance number 150
particles.line_linked.color HEX (string) #ffffff
particles.line_linked.opacity number (0 to 1) 0.5
particles.line_linked.width number 1.5
particles.move.enable boolean true / false
particles.move.speed number 4
particles.move.direction string "none"
"top"
"top-right"
"right"
"bottom-right"
"bottom"
"bottom-left"
"left"
"top-left"
particles.move.random boolean true / false
particles.move.straight boolean true / false
particles.move.out_mode string
(out of canvas)
"out"
"bounce"
"bounce-vertical"
"bounce-horizontal"
particles.move.bounce boolean
(between particles)
true / false
particles.move.attract.enable boolean true / false
particles.move.attract.rotateX number 3000
particles.move.attract.rotateY number 1500
interactivity.detect_on string "canvas", "window","parent"
interactivity.events.onhover.enable boolean true / false
interactivity.events.onhover.mode string
array selection
"grab"
"bubble"
"repulse"
["grab", "bubble"]
interactivity.events.onclick.enable boolean true / false
interactivity.events.onclick.mode string
array selection
"push"
"remove"
"bubble"
"repulse"
["push", "repulse"]
interactivity.events.resize boolean true / false
interactivity.events.modes.grab.distance number 100
interactivity.events.modes.grab.line_linked.opacity number (0 to 1) 0.75
interactivity.events.modes.bubble.distance number 100
interactivity.events.modes.bubble.size number 40
interactivity.events.modes.bubble.duration number
(second)
0.4
interactivity.events.modes.repulse.distance number 200
interactivity.events.modes.repulse.duration number
(second)
1.2
interactivity.events.modes.push.particles_nb number 4
interactivity.events.modes.remove.particles_nb number 4
retina_detect boolean true / false