{"_id":"tsparticles-basic","_rev":"1-f39a3c196c4b8e0412d75657ca80c471","name":"tsparticles-basic","dist-tags":{"latest":"2.12.0"},"versions":{"2.12.0":{"name":"tsparticles-basic","version":"2.12.0","description":"Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"bundles/basic"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"github","url":"https://github.com/sponsors/tsparticles"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.basic.bundle.min.js","unpkg":"tsparticles.basic.bundle.min.js","types":"types/index.d.ts","sideEffects":false,"dependencies":{"tsparticles-engine":"^2.12.0","tsparticles-move-base":"^2.12.0","tsparticles-shape-circle":"^2.12.0","tsparticles-updater-color":"^2.12.0","tsparticles-updater-opacity":"^2.12.0","tsparticles-updater-out-modes":"^2.12.0","tsparticles-updater-size":"^2.12.0"},"gitHead":"0a2199b218ef917a62d22b76b37e6b0586d30915","_id":"tsparticles-basic@2.12.0","_nodeVersion":"18.16.0","_npmVersion":"lerna/7.1.4/node@v18.16.0+arm64 (darwin)","dist":{"integrity":"sha512-pN6FBpL0UsIUXjYbiui5+IVsbIItbQGOlwyGV55g6IYJBgdTNXgFX0HRYZGE9ZZ9psEXqzqwLM37zvWnb5AG9g==","shasum":"39fd8cc31cf625b8c7c9dc517c4cb9943cafa5f4","tarball":"https://registry.npmjs.org/tsparticles-basic/-/tsparticles-basic-2.12.0.tgz","fileCount":20,"unpackedSize":621303,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB118PJgRPXje38cFXqJBi2l76AwgIlsB7WlRYzAP2Y7AiAwYkZQgtpT7GLEZdgLzGifOb+qoxewW1V+imsbV/PAYw=="}]},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-basic_2.12.0_1691107241642_0.7115447121191201"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"}},"time":{"created":"2023-08-04T00:00:41.636Z","2.12.0":"2023-08-04T00:00:41.853Z","modified":"2023-12-07T18:56:45.589Z"},"maintainers":[{"name":"matteobruni","email":"ar3s@icloud.com"}],"description":"Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"bundles/basic"},"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"license":"MIT","readme":"[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)\n\n# tsParticles Basic Bundle\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-basic/badge)](https://www.jsdelivr.com/package/npm/tsparticles-basic) [![npmjs](https://badge.fury.io/js/tsparticles-basic.svg)](https://www.npmjs.com/package/tsparticles-basic) [![npmjs](https://img.shields.io/npm/dt/tsparticles-basic)](https://www.npmjs.com/package/tsparticles-basic) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)\n\n[tsParticles](https://github.com/matteobruni/tsparticles) basic bundle loads the minimum features to a `tsparticles-engine` instance for having dots moving in the canvas.\n\n**Included Packages**\n\n- [tsparticles-engine](https://github.com/matteobruni/tsparticles/tree/main/engine)\n- [tsparticles-move-base](https://github.com/matteobruni/tsparticles/tree/main/move/base)\n- [tsparticles-shape-circle](https://github.com/matteobruni/tsparticles/tree/main/shapes/circle)\n- [tsparticles-updater-color](https://github.com/matteobruni/tsparticles/tree/main/updaters/color)\n- [tsparticles-updater-opacity](https://github.com/matteobruni/tsparticles/tree/main/updaters/opacity)\n- [tsparticles-updater-out-modes](https://github.com/matteobruni/tsparticles/tree/main/updaters/outModes)\n- [tsparticles-updater-size](https://github.com/matteobruni/tsparticles/tree/main/updaters/size)\n\n## How to use it\n\n### CDN / Vanilla JS / jQuery\n\nThe CDN/Vanilla version JS has two different files:\n\n- One is a bundle file with all the scripts included in a single file\n- One is a file including just the `loadBasic` function to load the tsParticles basic preset, all dependencies must be\n  included manually\n\n#### Bundle\n\nIncluding the `tsparticles.basic.bundle.min.js` file will work exactly like `v1`, you can start using the `tsParticles`\ninstance in the same way.\n\nThis is the easiest usage, since it's a single file with the some of the `v1` features.\n\nAll new features will be added as external packages, this bundle is recommended for migrating from `v1` easily.\n\n#### Not Bundle\n\nThis installation requires more work since all dependencies must be included in the page. Some lines above are all\nspecified in the **Included Packages** section.\n\n### Usage\n\nOnce the scripts are loaded you can set up `tsParticles` like this:\n\n```javascript\n(async () => {\n  await loadBasic(tsParticles); // not needed if using the bundle script, required for any other installation\n\n  await tsParticles.load({\n    id: \"tsparticles\",\n    options: {\n      /* options */\n    },\n  });\n})();\n```\n\n### React.js / Preact / Inferno\n\n_The syntax for `React.js`, `Preact` and `Inferno` is the same_.\n\nThis sample uses the class component syntax, but you can use hooks as well (if the library supports it).\n\n_Class Components_\n\n```typescript jsx\nimport React from \"react\";\nimport Particles from \"react-particles\";\nimport type { Engine } from \"tsparticles-engine\";\nimport { loadBasic } from \"tsparticles-basic\";\n\nexport class ParticlesContainer extends PureComponent<unknown> {\n  // this customizes the component tsParticles installation\n  async customInit(engine: Engine) {\n    // this adds the bundle to tsParticles\n    await loadBasic(engine);\n  }\n\n  render() {\n    const options = {\n      /* custom options */\n    };\n\n    return <Particles options={options} init={this.customInit} />;\n  }\n}\n```\n\n_Hooks / Functional Components_\n\n```typescript jsx\nimport React, { useCallback } from \"react\";\nimport Particles from \"react-particles\";\nimport type { Engine } from \"tsparticles-engine\";\nimport { loadBasic } from \"tsparticles-basic\";\n\nexport function ParticlesContainer(props: unknown) {\n  // this customizes the component tsParticles installation\n  const customInit = useCallback(async (engine: Engine) => {\n    // this adds the bundle to tsParticles\n    await loadBasic(engine);\n  });\n\n  const options = {\n    /* custom options */\n  };\n\n  return <Particles options={options} init={this.customInit} />;\n}\n```\n\n### Vue (2.x and 3.x)\n\n_The syntax for `Vue.js 2.x` and `3.x` is the same_\n\n```vue\n<Particles id=\"tsparticles\" :particlesInit=\"particlesInit\" :options=\"options\" />\n```\n\n```js\nconst options = {\n    /* custom options */\n};\n\nasync function particlesInit(engine: Engine) {\n    await loadBasic(engine);\n}\n```\n\n### Angular\n\n```html\n<ng-particles [id]=\"id\" [options]=\"options\" [particlesInit]=\"particlesInit\"></ng-particles>\n```\n\n```ts\nconst options = {\n  /* custom options */\n};\n\nasync function particlesInit(engine: Engine): void {\n  await loadBasic(engine);\n}\n```\n\n### Svelte\n\n```sveltehtml\n\n<Particles\n    id=\"tsparticles\"\n    options={options}\n    particlesInit=\"{particlesInit}\"\n/>\n```\n\n```js\nlet options = {\n  /* custom options */\n};\n\nlet particlesInit = async (engine) => {\n  await loadBasic(engine);\n};\n```\n","readmeFilename":"README.md"}