{"id":13402789,"url":"https://github.com/simeydotme/sparticles","last_synced_at":"2026-04-25T10:02:36.526Z","repository":{"id":36183274,"uuid":"222140541","full_name":"simeydotme/sparticles","owner":"simeydotme","description":"JavaScript Particles in Canvas ~~ Fast, Lightweight, High Performance.","archived":false,"fork":false,"pushed_at":"2023-01-07T04:25:09.000Z","size":1919,"stargazers_count":261,"open_issues_count":11,"forks_count":21,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-29T16:06:50.099Z","etag":null,"topics":["animation","canvas","effect","effects","javascript","particle","particles","particles-js","particlesjs","react","react-particles","sparticles","svelte","svelte-particles","typescript","vanilla","vanilla-js","vue","vue-particles"],"latest_commit_sha":null,"homepage":"https://sparticlesjs.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simeydotme.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-16T18:14:32.000Z","updated_at":"2025-03-17T12:10:28.000Z","dependencies_parsed_at":"2023-01-16T23:46:03.571Z","dependency_job_id":null,"html_url":"https://github.com/simeydotme/sparticles","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simeydotme%2Fsparticles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simeydotme%2Fsparticles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simeydotme%2Fsparticles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simeydotme%2Fsparticles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simeydotme","download_url":"https://codeload.github.com/simeydotme/sparticles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369952,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","canvas","effect","effects","javascript","particle","particles","particles-js","particlesjs","react","react-particles","sparticles","svelte","svelte-particles","typescript","vanilla","vanilla-js","vue","vue-particles"],"created_at":"2024-07-30T19:01:20.873Z","updated_at":"2026-04-25T10:02:36.515Z","avatar_url":"https://github.com/simeydotme.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","🚀 A series of exquisite and compact web page cool effects"],"sub_categories":["Background Decoration"],"readme":"# Sparticles\n### javascript particles in canvas\n\n#### https://sparticlesjs.dev\n\n**Lightweight, _High Performance_ Particles in Canvas.**  \n\u003csup\u003eFor those occasions when you ***👏 just 👏 gotta 👏 have 👏*** sparkles, \nsnow, or stars on your homepage!\u003c/sup\u003e  \n\n![Image of little coloured stars known as \"Sparticles\" running at 120fps](example/example.gif)\n\n\n---\n\n- [installation](#installation)\n- [framework usage (Svelte 5, React, Vue)](#framework-usage-svelte-5-react-vue)\n- [parameters](#parameters)\n- [options](#options)\n- [methods](#methods)\n- [styling](#styling)\n  - [placing in the page's background](#placing-the-sparticles-in-the-page-s-background)\n  - [fading out at the edges](#fading-particles-at-the-edges-radial-gradient-mask)\n- [performance](#performance)\n- [why?](#why-sparticles-)\n\n---\n  \n\n# installation\n\nDepending on how your project looks, \n- you may want to [include a direct link to the script](#vanilla) and \nthen initialise the sparkles,\n- or you may want\nto [import the module in to your application](#app--bundler) for a more modern approach.\n\n## vanilla\n\n1. firstly make sure you've downloaded [the latest version of the script](https://github.com/simeydotme/sparticles/releases) \nto your application directory _(if you are running on a CMS you might also \nneed to upload the file to your server)_. The file you'll want to use is; `dist/sparticles.min.js` \nto make sure it downloads the fastest for your users.\n\n2. After you've downloaded, or uploaded, the `sparticles.min.js` file to the \ncorrect place, you'll then need to include it in your web page;\n\n```html\n\u003cscript src=\"../path/to/sparticles.min.js\"\u003e\u003c/script\u003e\n```\n\n3. And finally, you should then be able to initialise the Sparticles by \nrunning this code in your javascript;  \n\u003csup\u003e_(make sure this code runs _after_ you've included the script above.)_\u003c/sup\u003e\n\n```html\n\u003cscript\u003e\n  window.onload = function() {\n    let myElement = document.getElementById(\"myDiv\");\n    let mySparticles = new Sparticles(myElement, { count: 100 }, 400);\n  }\n\u003c/script\u003e\n```\n\n## jquery\n\nFor jQuery sites, you may follow all of the steps above, but replace \nthe third step with something like below;\n\n```html\n\u003cscript\u003e\n  let $el = $(\"#myDiv\");\n  let mySparticles = new Sparticles($el[0], { count: 100 }, 400);\n\u003c/script\u003e\n```\n\n## app / bundler\n\nIf you're running a more modern type of application with something like Svelte or VueJs; \n\n1. First you will want to install the module with NPM;\n\n```bash\nyarn add --dev sparticles\n# or npm, if you prefer\nnpm install --save-dev sparticles\n```\n\n2. Then import the module in to the app where you want to use it\n\n```js\nimport Sparticles from \"sparticles\";\n```\n\n3. Attach Sparticles to a DOM node when it's available (see [Framework usage](#framework-usage-svelte-5-react-vue) for Svelte 5, React, and Vue patterns):\n\n```js\nnew Sparticles(node, { count: 100 }, 400);\n```\n\n# framework usage (Svelte 5, React, Vue)\n\nUse a **ref** to the container element, create the Sparticles instance when the ref is mounted, and **destroy** it on cleanup so the canvas is removed and listeners are freed.\n\n## Svelte 5\n\nBind to the container with `bind:this`, create Sparticles in `onMount`, and destroy in `onDestroy`:\n\n```html\n\u003cscript\u003e\n  import { onMount, onDestroy } from \"svelte\";\n  import Sparticles from \"sparticles\";\n\n  let container;\n  let sparticles;\n\n  onMount(() =\u003e {\n    if (container) {\n      sparticles = new Sparticles(container, { count: 100, color: \"gold\" });\n    }\n  });\n\n  onDestroy(() =\u003e {\n    if (sparticles) {\n      sparticles.destroy();\n    }\n  });\n\u003c/script\u003e\n\n\u003cdiv bind:this={container} class=\"sparticles-wrap\"\u003e\u003c/div\u003e\n```\n\nOr use an **action** so init and cleanup stay in one place:\n\n```html\n\u003cscript\u003e\n  import Sparticles from \"sparticles\";\n\n  function sparticles(node, options = {}) {\n    const instance = new Sparticles(node, options);\n    return {\n      destroy() {\n        instance.destroy();\n      },\n    };\n  }\n\u003c/script\u003e\n\n\u003cdiv use:sparticles={{ count: 100, color: \"gold\" }} class=\"sparticles-wrap\"\u003e\u003c/div\u003e\n```\n\n## React\n\nUse a **ref** for the container and **useEffect** to create on mount and destroy on unmount:\n\n```jsx\nimport { useRef, useEffect } from \"react\";\nimport Sparticles from \"sparticles\";\n\nexport function ParticleBackground() {\n  const containerRef = useRef(null);\n\n  useEffect(() =\u003e {\n    if (!containerRef.current) return;\n    const instance = new Sparticles(containerRef.current, { count: 100 });\n    return () =\u003e instance.destroy();\n  }, []);\n\n  return \u003cdiv ref={containerRef} className=\"sparticles-wrap\" /\u003e;\n}\n```\n\nIf you need to react to option changes, depend on them in the effect and destroy/create on change:\n\n```jsx\nuseEffect(() =\u003e {\n  if (!containerRef.current) return;\n  const instance = new Sparticles(containerRef.current, options);\n  return () =\u003e instance.destroy();\n}, [options.count, options.speed /* etc. */]);\n```\n\n## Vue 3\n\nUse a **ref** for the container, create Sparticles in **onMounted**, and destroy in **onUnmounted**:\n\n```vue\n\u003cscript setup\u003e\nimport { ref, onMounted, onUnmounted } from \"vue\";\nimport Sparticles from \"sparticles\";\n\nconst container = ref(null);\nlet instance = null;\n\nonMounted(() =\u003e {\n  if (container.value) {\n    instance = new Sparticles(container.value, { count: 100 });\n  }\n});\n\nonUnmounted(() =\u003e {\n  if (instance) {\n    instance.destroy();\n  }\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv ref=\"container\" class=\"sparticles-wrap\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n```\n\nWith **Options API**, use a container ref and `mounted` / `beforeUnmount`:\n\n```vue\n\u003cscript\u003e\nimport Sparticles from \"sparticles\";\n\nexport default {\n  data() {\n    return { instance: null };\n  },\n  mounted() {\n    if (this.$refs.container) {\n      this.instance = new Sparticles(this.$refs.container, { count: 100 });\n    }\n  },\n  beforeUnmount() {\n    if (this.instance) this.instance.destroy();\n  },\n};\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv ref=\"container\" class=\"sparticles-wrap\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n```\n\n---\n\n# usage\n\nProviding that the script/module has been properly included, then it can be initialised\nby running the `Sparticles()` constructor;\n```js\nlet mySparticles = new Sparticles();\n```\n\n# parameters\n\nWhen initialising the Sparticles instance there are some parameters that can be supplied.\n\n| parameter               | type          | default            | description                                                 |\n| ----------------------- | ------------- | ------------------ | ----------------------------------------------------------- |\n| **node**                | `HTMLElement` | `document.body`    | the element in the DOM which the Sparticles will append to  |\n| **[options](#options)** | `Object`      | `{}`               | an object with [all the options for the instance](#options) |\n| **width**               | `Number`      | `node.clientWidth` | the width of the canvas element                             |\n| **height**              | `Number`      | `node.clientWidth` | the height of the canvas element (defaults to width)        |\n\n\u003csup\u003eLeave the `width`/`height` properties empty to make the canvas resize to fit it's `node`\u003c/sup\u003e\n\n---\n\n- Supply nothing and get a default Sparticle instance on the `\u003cbody\u003e`\n```js\nlet mySparticles = new Sparticles();\n```\n\n- Supply a single HTMLElement parameter for a default Sparticle instance on that element\n```js\nlet mySparticles = new Sparticles(document.getElementById(\"myDiv\"));\n```\n\n- Supply a single `Object` parameter to customise a Sparticle instance on the `\u003cbody\u003e`\n```js\nlet mySparticles = new Sparticles({ color: \"red\" });\n```\n\n- Supply the width and height parameters for a custom size\n```js\nlet mySparticles = new Sparticles({ color: \"red\" }, 400, 300);\n```\n\n# options\n\nA brief look at all the options, with more details below.\n\n| option                                    | type             | default       | description                                                                                  |\n| ----------------------------------------- | ---------------- | ------------- | -------------------------------------------------------------------------------------------- |\n| **[composition](#composition)**           | `String`         | `source-over` | canvas `globalCompositeOperation` value for particles                                          |\n| **[count](#count)**                       | `Number`         | `50`          | number of particles on the canvas simultaneously                                             |\n| **[speed](#speed)**                       | `Number`         | `10`          | default velocity of every particle                                                           |\n| **[parallax](#parallax)**                 | `Number`         | `0`           | strength of size-based speed variation 0–100 (0 = off; smaller slower, larger faster)        |\n| **[direction](#direction)**               | `Number`         | `180`         | default direction in degrees (0 = ↑, 180 = ↓); ignored when `spawnFromPoint` is true          |\n| **[xVariance](#xVariance)**               | `Number`         | `2`           | random deviation of particles on x-axis from default direction                               |\n| **[yVariance](#yVariance)**               | `Number`         | `2`           | random deviation of particles on y-axis from default direction                               |\n| **[rotate](#rotate)**                     | `Boolean`        | `true`        | can particles rotate                                                                         |\n| **[rotation](#rotation)**                 | `Number`         | `1`           | default rotational speed for every particle                                                  |\n| **[alphaSpeed](#alphaSpeed)**             | `Number`         | `10`          | rate of change in alpha over time                                                            |\n| **[alphaVariance](#alphaVariance)**       | `Number`         | `1`           | random deviation of alpha change                                                             |\n| **[minAlpha](#minAlpha)**                 | `Number`         | `0`           | minumum alpha value of every particle                                                        |\n| **[maxAlpha](#maxAlpha)**                 | `Number`         | `1`           | maximum alpha value of every particle                                                        |\n| **[minSize](#minSize)**                   | `Number`         | `1`           | minimum size of every particle                                                               |\n| **[maxSize](#maxSize)**                   | `Number`         | `10`          | maximum size of every particle                                                               |\n| **[bounce](#bounce)**                     | `Boolean`        | `false`       | should the particles bounce off edge of canvas                                               |\n| **[drift](#drift)**                       | `Number`         | `1`           | side-to-side drift perpendicular to each particle’s direction of travel                    |\n| **[glow](#glow)**                         | `Number`         | `0`           | the glow effect size of each particle                                                        |\n| **[twinkle](#twinkle)**                   | `Boolean`        | `false`       | particles to exhibit an alternative alpha transition as \"twinkling\"                          |\n| **[style](#style)**                       | `String`         | `fill`        | fill style of particles (one of; `fill`, `stroke` or `both`)                                 |\n| **[shape](#shape)**                       | `String`/`Array` | `circle`      | shape of particles (any of; circle, square, triangle, diamond, line, image) or \"random\"      |\n| **[color](#color)**                       | `String`/`Array` | `random`      | css color as string, or array of color strings (can also be `random`)                        |\n| **[randomColor](#randomColor)**           | `Function`       | `randomHsl()` | function for returning a random color when the color is set as `random`                      |\n| **[randomColorCount](#randomColorCount)** | `Number`         | `3`           | number of random colours when the color is set as `random`                                   |\n| **[spawnFromPoint](#spawnFromPoint)**     | `Boolean`        | `false`       | when `true`, particles spawn from configured points and move radially outward                   |\n| **[spawnFromCenter](#spawnFromCenter)**   | `Boolean`        | `false`       | alias of `spawnFromPoint`                                                                       |\n| **[spawnArea](#spawnArea)**               | `Number`         | `20`          | spawn circle diameter as % of canvas width (0–90) when `spawnFromPoint` is true               |\n| **[spawnLocations](#spawnLocations)**     | `Array\u003cArray\u003cNumber\u003e\u003e` | `[[50,50]]` | array of [x,y] spawn origins as % of canvas width/height (each clamped 0..100)                  |\n| **[staggerSpawn](#staggerSpawn)**         | `Number`         | `0`           | when `\u003e 0` and `spawnFromPoint`, staggers initial spawns over this many seconds        |\n| **[imageUrl](#imageUrl)**                 | `String`/`Array` |               | if shape is `image`, define an image url (can be data-uri, **should be square (1:1 ratio)**) |\n\n---\n\n## `composition`\n- Type: `String` \n- Default: `source-over`\n- Possible: [`see list here`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)\n\nThe [global render composition](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)\nwhen rendering particles on top of one-another. This, however, is a very expensive operation when set to anything\nother than the default value (`source-over`), and will ultimately degrade performance, especially with many particles.\n\nWill accept [any of the values that are provided as part of the Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)\n\n## `count`\n- Type: `Number`\n- Default: `50`\n- Range: `1 - 10000`\n\nSimply the number of particles drawn to the screen.  \nValues over `500` may begin to degrade performance.\n\n## `speed`\n- Type: `Number`\n- Default: `10`\n- Range: `0 - 100`\n\nThe base value of speed across all particles. This is modified by options such as \n`parallax` and `[x/y]Variance` to determine the final velocity of each individual particle.\nA speed of `0` will render particles stationary before applying `[x/y]Variance`.\n\n## `parallax`\n- Type: `Number`\n- Default: `0`\n- Range: `0 - 100`\n\nStrength of size-based speed variation. When `0`, parallax is off and all particles use the base speed. When set, particles smaller than the median size (between `minSize` and `maxSize`) move slower, and larger particles move faster, simulating near/far depth. The average speed stays stable when you change parallax, so the `speed` option remains the main control. Values around 50 give a moderate effect; 100 gives strong variation (e.g. double size ≈ double speed).\n\n## `direction`\n- Type: `Number`\n- Default: `180`\n- Range: `0 - 360`\n\nThe base angle (in degrees) at which the particles are travelling, so long as they have a speed value. Ignored when [spawnFromPoint](#spawnFromPoint) is true.\n\n## `xVariance`\n- Type: `Number`\n- Default: `2`\n- Range: `0 - 20`\n\nHow much variance is applied between particles on the `X` axis. A value of `0` will make all particles\nappear to be going completely parallel, and look unnatural.\n\nCan be used in conjunction with `speed: 0;` to make particles which float randomly in space.\n\n## `yVariance`\n- Type: `Number`\n- Default: `2`\n- Range: `0 - 20`\n\nHow much variance is applied between particles on the `Y` axis. A value of `0` will make all particles\nappear to be going completely parallel, and look unnatural.\n\nCan be used in conjunction with `speed: 0;` to make particles which float randomly in space.\n\n## `rotate`\n- Type: `Boolean`\n- Default: `true`\n\nToggle whether the particles are allowed to spin about their axis.\n\n## `rotation`\n- Type: `Number`\n- Default: `1`\n- Range: `0 - 20`\n\nHow fast the particles can spin about their axis, this has a random multiplier added per-particle\nwhich prevents a completely unnatural spinning effect.\n\n## `alphaSpeed`\n- Type: `Number`\n- Default: `10`\n- Range: `0 - 50`\n\nRate of change for the alpha value of all particles. A higher value will encourage the particles\nto flicker like candle lights. A value of `0` will disable alpha change.\n\n## `alphaVariance`\n- Type: `Number`\n- Default: `2`\n- Range: `0 - 10`\n\nHow much variance is applied between each particle on the alpha value change over time. A value\nof `0` will cause all particles to change alpha at the same rate, a higher value will introduce more\nvariety.\n\n## `minAlpha`\n- Type: `Number`\n- Default: `0`\n- Range: `-5 - +1`\n\nThe minimum alpha value a particle can change to. The lower the number the longer it will stay invisible\non the canvas, this could be useful in some scenarios where the particle should fade out for a while.\n\nMust be lower than the `maxAlpha` value.\n\n## `maxAlpha`\n- Type: `Number`\n- Default: `0`\n- Range: `0 - +5`\n\nThe maximum alpha value a particle can change to. The higher the number the longer it will stay visible\non the canvas, this could be useful in some scenarios where the particle should stay at max alpha for a time.\n\nMust be higher than the `minAlpha` value.\n\n## `minSize`\n- Type: `Number`\n- Default: `1`\n- Range: `1 - 100`\n\nMinimum size (in pixels) of the particles. The actual size of each particle is variable between the `minSize`\nand `maxSize`. If the `minSize` and `maxSize` are the same value; then all particles will be uniformly sized.\n\n## `maxSize`\n- Type: `Number`\n- Default: `10`\n- Range: `1 - 100`\n\nMaximum size (in pixels) of the particles. The actual size of each particle is variable between the `minSize`\nand `maxSize`. If the `minSize` and `maxSize` are the same value; then all particles will be uniformly sized.\n\n## `style`\n- Type: `String`\n- Default: `\"fill\"`\n- Values: `\"fill\"`, `\"stroke\"` or `\"both\"`\n\nParticles can be either stroked (outline) or filled (solid) and this setting determines that style. It's\nalso possible to randomize the style by choosing `\"both\"`\n\n## `bounce`\n- Type: `Boolean`\n- Default: `false`\n\nDetermine if particles should bounce off the boundaries of the canvas instead of resetting to the opposite side.\nThis is best used with `speed: 0;` and a high value for `[x/yVariance]` to create a chaotic effect.\n\n## `drift`\n- Type: `Number`\n- Default: `1`\n- Range: `1 - 20`\n\nHow much each particle will “drift” side-to-side as it moves, giving a floaty or wind-blown effect (e.g. snow, leaves). Drift is applied **perpendicular to the particle’s direction of travel** for every particle, and only when `speed \u003e 0`. Values are proportional to `speed` and may require fine-tuning.\n\n## `spawnFromPoint`\n- Type: `Boolean`\n- Default: `false`\n\nWhen `true`, particles spawn at a random position inside a circle centered around one of the configured [spawnLocations](#spawnLocations), then move **radially outward**. The global [direction](#direction) option is ignored; each particle’s direction is set by its spawn position. Other options (speed, parallax, variance, rotation, drift, bounce, etc.) still apply. Drift is applied perpendicular to the direction of travel. Particles start at 0 opacity and fade in to their initial alpha as they move away, using each particle’s alpha delta for the fade-in rate.\n\n## `spawnFromCenter`\n- Type: `Boolean`\n- Default: `false`\n\nAlias of [spawnFromPoint](#spawnFromPoint).\n\n## `spawnArea`\n- Type: `Number`\n- Default: `20`\n- Range: `0 - 90` (percentage of canvas width)\n\nSize of the spawn circle as a **percentage of the canvas width** when [spawnFromPoint](#spawnFromPoint) is true. Values are clamped between 0 and 90. For example, `20` means the circle’s diameter is 20% of the canvas width. New particles (and respawned particles that have gone off-canvas) appear at a random point inside this circle.\n\nWhen a sampled spawn point would place any part of the particle outside the canvas bounds, Sparticles instantly re-rolls a new point. If valid points are still not found after several tries, it falls back to the (clamped) spawner origin to ensure particles always spawn on-canvas.\n\n## `spawnLocations`\n- Type: `Array\u003cArray\u003cNumber\u003e\u003e` (array of tuple-like `[x, y]`)\n- Default: `[[50,50]]`\n- Range per axis: `0 - 100` (clamped)\n\nDefines one or more spawn origins for [spawnFromPoint](#spawnFromPoint), where each tuple is:\n- `x` as `% of canvas width`\n- `y` as `% of canvas height`\n\nParticles are assigned to spawn origins in **round-robin order by particle index** for even distribution across the locations.\n\nExamples:\n- `[[50,50]]` -\u003e center\n- `[[25,50],[75,50]]` -\u003e two horizontal spawn origins\n- `[[20,20],[80,20],[20,80],[80,80]]` -\u003e four-corner style distribution\n\nIf `spawnLocations` is missing or not an array of tuples, Sparticles falls back to `[[50,50]]`.\n\n## `staggerSpawn`\n- Type: `Number`\n- Default: `0`\n- Range: `0 - …` (seconds)\n\nWhen greater than 0 (and [spawnFromPoint](#spawnFromPoint) is true), the initial particles are **linearly staggered** over this many seconds instead of all appearing at once. For a given `count`, each particle gets a spawn time evenly distributed between `0` and `staggerSpawn`, and will begin moving/fading in only after its own time has passed. Resets after going off-canvas are not staggered; they respawn immediately.\n\n## `glow`\n- Type: `Number`\n- Default: `0`\n- Range: `0 - 50`\n\nGlow (or shadow) effect around the particle. This will not affect images.\n\n## `twinkle`\n- Type: `Boolean`\n- Default: `false`\n\nApply a \"twinkle\" effect to the particle when changing alpha. This works best with a higher `alphaSpeed` and \n`alphaVariance` value.\n\n## `color`\n- Type: `String` / `Array\u003cString\u003e`\n- Default: `\"random\"`\n- Values: any valid css/html color string\n\nA CSS/HTML color string to apply across all particles.  \nIf an array of colors (`[ \"#ff0\", \"red\", \"hsl(10,50%,50%)\" ]`) is given, then each particle will \nbe assigned a random color from the array. Additionally `\"random\"` can be used to assign any random color.\n\n## `randomColor`\n- Type: `Function`\n- Default: [`randomHSL()`](https://github.com/simeydotme/sparticles/blob/master/src/helpers.js#L55-L64)\n- Arguments: `index`, `total`\n\nCustom function to use when generating `random` colors. The default function will return a fairly\npleasant `hsl()` color with a high saturation and medium lightness. This can be overridden to suit\nyour environment better. The two arguments (`index`, `total`) are `Integer`s and allow for a little\npsuedo-randomizing.\n\n**example:**\n\n```js\nrandomColor: function( index, total ) {\n\treturn `hsl( ${index}, 80%, ${total - index}% )`;\n}\n```\n\n## `randomColorCount`\n- Type: `Number`\n- Default: `3`\n- Range: `1 - 50`\n\nHow many random colors to generate when `color` is `random`. The more colors generated\nthe more chance there is of a performance penalty. It should be OK up to `50`.\n\n## `shape`\n- Type: `String` / `Array\u003cString\u003e`\n- Default: `\"circle\"`\n- Values: `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"line\"`, `\"diamond\"`, `\"star\"` or `\"image\"`\n\nDetermine the shape of all the particles.  \nIf an array of shapes (`[ \"circle\", \"star\", \"diamond\" ]`) is given, then each particle will\nbe assigned a random shape form the array. Additionally `\"image\"` can be used to [define a custom\nparticle shape from an image when combined with `imageUrl`](#imageUrl).\n\n## `imageUrl`\n- Type: `String` / `Array\u003cString\u003e`\n- Default: `\"\"`\n- Values: a valid url, or data-uri\n\nDetermine the custom image to be used for all the particles.\nIf an array of urls (`[ \"http://my.image/shape.png\", \"http://my.svg/shape.svg\" ]`) is given, then each particle\nwill be assigned a random image as it's shape from the array.\n\u003csup\u003e**This image should be a square (1:1)**\u003c/sup\u003e  \n\n- ℹ `imageUrl` only has an effect [if a `shape` in the array is; `\"image\"`](#shape).\n- ℹ `imageUrl` can accept **svg**, but the `\u003csvg\u003e` root needs a width/height. [(see issue)](https://github.com/simeydotme/sparticles/issues/2);\n\n# methods\n\na few public methods can be accessed by storing a reference to the Sparticles instance\nand executed like so;\n\n```js\nlet mySparticles = new Sparticles();\nmySparticles.destroy();\n```\n\n| method                                               | description                                                |\n| ---------------------------------------------------- | ---------------------------------------------------------- |\n| **[destroy()](#destroy)**                            | destroy the Sparticles instance and remove event listeners |\n| **[setCanvasSize( width, height )](#setCanvasSize)** | set the new size of the canvas                             |\n| **[resetSparticles()](#resetSparticles)**            | reset all the particles on the canvas                      |\n\n# styling\n\nIf the Sparticles are simply going to be placed in a container (like a `\u003cdiv\u003e`) then the only\nstyling that should be necessary is to set the width/height of the canvas [using the \n`width` and `height` parameters](#parameters).\n\n---\n\n## placing the Sparticles in the page's background\n\nTo place the Sparticles in the background of a web-page, you'll need to add a\ncontainer to the `\u003cbody\u003e` which the canvas can sit in, then `position` it `fixed`:\n\n```html\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003c!-- your html web page content --\u003e\n    \u003cdiv class=\"sparticles-container\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nThen we set up the CSS styling for the Sparticles container depending on our\nsituation:\n```css\n.sparticles-container {\n  position: fixed;\n  left: 0; right: 0;\n  top: 0; bottom: 0;\n\n  /** use z-index to position either above or behind the body content */\n  z-index: 2;\n  /** use pointer-events: none; to prevent the particles from blocking user interaction */\n  pointer-events: none;\n}\n```\n\nFinally we can initiate the Sparticles with the `.sparticles-container`\nas the DOM element it's bound to:\n```js\nlet container = document.querySelector(\".sparticles-container\");\nlet mySparticles = new Sparticles( container, { color: \"red\" });\n// no need for width/height as the  canvas will fill \n// the container which is fixed to the viewport size\n```\n\n## fading particles at the edges (radial gradient mask)\n\nTo make particles fade toward the edge of the canvas instead of clipping sharply, you can\napply a **radial gradient mask** to the Sparticles container. The mask makes the center\nopaque and the edges transparent, so particles appear to soften and disappear as they\napproach the border.\n\nAdd `mask-image` (and `-webkit-mask-image` for Safari) to the same container you use for\nthe canvas:\n\n```css\n.sparticles-container {\n  /* Fade particles at the edges; center stays fully visible */\n  mask-image: radial-gradient(\n    farthest-side,\n    black 50%,\n    transparent 100%\n  );\n  mask-mode: alpha;\n  -webkit-mask-image: radial-gradient(\n    farthest-side,\n    black 50%,\n    transparent 100%\n  );\n  -webkit-mask-mode: alpha;\n}\n```\n\n- **`mask-mode: alpha;`** — ensures the mask is applied as an alpha channel, not a color.\n- **`farthest-side`** — Size of the visible circle (adjust to control how far from the center the fade starts).\n- **`black 50%, transparent 100%`** — black = visible, transparent = hidden; tweak the percentage to make the fade steeper or gentler.\n\n# performance\n\nSparticles is really quite fast! \n\nIt was designed to be the smallest (_within reason_) and fastest performing\nparticles script with such a large feature set! \n\nSome other popular particle scripts will eat up to 50% of your CPU to \nrender 1,000 particles. Sparticles will do the same while only using 9% \nand will run at a buttery 120fps if your device can refresh that fast!\n\nSparticles was built because other offerings in the space were either \ndoing way too much and adding too many `kb` to load, or they were just \ntoo slow and unable to serve enough particles to lower end devices \nwithout chugging along jankily! \n\nI used to get a lot of requests from Editorial/Content teams who wanted\nsnow/sparkles/whatever on their home page during events, and I either had\nto reject because the plugins were killing our user's devices or accept\nand live knowing I've failed the users/customers! 😢 ~~ so Sparticles should fix that!\n\n## mobile\n\n- ℹ **It's quite easy to achieve 120fps+ with over 1,000 particles on a decent computer!**  \n\n- ⚠ _But please remember **your users are not all running super-computers** with GPUs, they \nare [**probably on a mobile phone**](https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/). \nPlease avoid running heavy animations on phones! If you really have to then I'd advise reducing the particles down to 100 or less for a mobile device!_\n\nPlease take care of your mobile users! They are probably your primary user if you're\nrunning a commercial or non-tech website! use a script like below to determine the amount\nof particles based on their device;\n\n```js\n  let myElement = document.getElementById(\"myDiv\");\n  // PLEASE DON'T PUSH A TON OF ANIMATION ON MOBILES!\n  let count = (/Mobi|Android/i.test(navigator.userAgent)) ? 100 : 500;\n  let mySparticles = new Sparticles(myElement, { count: count }, 400);\n```\n\n# why \"Sparticles\" ?\n```\nparticles + [ speed ⚡ | snow ❄ | sparkles ✨ | stars ⭐ ] = Sparticles 🌈\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimeydotme%2Fsparticles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimeydotme%2Fsparticles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimeydotme%2Fsparticles/lists"}