{"id":15015774,"url":"https://github.com/tsparticles/ember","last_synced_at":"2025-04-12T09:52:12.342Z","repository":{"id":83265545,"uuid":"582698648","full_name":"tsparticles/ember","owner":"tsparticles","description":"tsParticles Official Ember.js component","archived":false,"fork":false,"pushed_at":"2023-05-30T07:06:28.000Z","size":1546,"stargazers_count":6,"open_issues_count":8,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-03T12:56:57.526Z","etag":null,"topics":["ember","emberjs","hacktoberfest","javascript","tsparticles","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tsparticles.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-27T16:05:22.000Z","updated_at":"2023-09-20T09:24:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"cc0817a5-fd4a-4ecf-bc57-ff363caa3c67","html_url":"https://github.com/tsparticles/ember","commit_stats":{"total_commits":102,"total_committers":4,"mean_commits":25.5,"dds":0.2450980392156863,"last_synced_commit":"d49b07f4571c5045db9353368d3ff806ef794bba"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsparticles%2Fember","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsparticles%2Fember/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsparticles%2Fember/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsparticles%2Fember/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tsparticles","download_url":"https://codeload.github.com/tsparticles/ember/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248550636,"owners_count":21122932,"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":["ember","emberjs","hacktoberfest","javascript","tsparticles","typescript"],"created_at":"2024-09-24T19:47:54.689Z","updated_at":"2025-04-12T09:52:12.308Z","avatar_url":"https://github.com/tsparticles.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)\n\n# ember-tsparticles\n\nAn Ember.js component for using [tsParticles](https://github.com/matteobruni/tsparticles). Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website.\n\n\n## Compatibility\n\n* Ember.js v3.28 or above\n* Ember CLI v3.28 or above\n* Node.js v14 or above\n\n\n## Installation\n\n```bash\nnpm install ember-tsparticles\n# or\nyarn add ember-tsparticles\n# or\npnpm install ember-tsparticles\n# or\nember install ember-tsparticles\n```\n\n\n## Usage\n\nFor the most basic usage of the component you can pass a configuration object via the `options` argument and initialize the tsparticles features you need in the `particlesInit` callback.\n\nBy default `tsparticles` doesn't load any extensions required to render particles. Extensions can be loaded on a granular level which has the benefit that only what is required is loaded, but to start out it can be useful to load all options via the `loadFull` function of `tsparticles`.\n\nFor the configuration object API documentation, see the [tsparticles repository](https://github.com/matteobruni/tsparticles).\n\n```bash\nnpm install tsparticles\n```\n\n```hbs\n\u003cParticles\n  @options={{this.options}}\n  @particlesInit={{this.particlesInit}}\n/\u003e\n```\n```js\nimport { Component } from '@glimmer/component';\nimport { loadFull } from 'tsparticles';\n\nexport default class ExampleComponent extends Component {\n  options = {\n    particles: {\n      color: {\n        value: '#000',\n      },\n      links: {\n        enable: true,\n        color: '#000',\n      },\n      move: {\n        enable: true,\n      },\n    },\n  };\n\n  async particlesInit(engine) {\n    await loadFull(engine);\n  }\n}\n```\n\n![ExampleComponent](/images/minimal.png)\n\n### With template import syntax\n\n When using [ember-template-imports](https://github.com/ember-template-imports/ember-template-imports) the example above would look like this, using the `.gjs` file extension.\n\n ```js\n import { loadFull } from 'tsparticles';\n import Particles from 'ember-tsparticles/components/particles';\n \n const options = {\n   particles: {\n     color: {\n       value: '#000',\n     },\n     links: {\n       enable: true,\n       color: '#000',\n     },\n     move: {\n       enable: true,\n     },\n   },\n };\n const particlesInit = async (engine) =\u003e {\n   await loadFull(engine);\n };\n \u003ctemplate\u003e\n   \u003cParticles\n     @options={{options}}\n     @particlesInit={{particlesInit}}\n   /\u003e\n \u003c/template\u003e\n ```\n\n### Using presets\n\nPresets are offered by `tsparticles` which allow to use premade configuration objects. Refer to the [presets](https://github.com/matteobruni/tsparticles#Presets) section in the `tsparticles` repository to view all existing presets.\n\n```bash\nnpm install tsparticles-preset-confetti\n```\n\n```hbs\n\u003cParticles\n  @options={{hash preset='confetti'}}\n  @particlesInit={{this.loadPreset}}\n/\u003e\n```\n```js\nimport { Component } from '@glimmer/component';\nimport { loadConfettiPreset } from 'tsparticles-preset-confetti';\n\nexport default class ConfettiComponent extends Component {\n  async loadPreset(engine) {\n    await loadConfettiPreset(engine);\n  }\n}\n```\n\n![ConfettiComponent](/images/confetti.png)\n\n### Loading options from an URL\n\nOptions can also be passed via link with the `url` argument. These will be fetched once the component renders.\n\n```hbs\n\u003cParticles\n  @url={{'http://foo.bar/particles.json'}}\n  @particlesInit={{this.particlesInit}}\n/\u003e\n```\n```js\nimport { Component } from '@glimmer/component';\nimport { loadFull } from 'tsparticles';\n\nexport default class ExampleComponent extends Component {\n  async particlesInit(engine) {\n    await loadFull(engine);\n  }\n}\n```\n\n### Particles loaded callback\n\nFurther customization to the `tsparticles` container can be done by using the `particlesLoaded` callback argument. This callback passes the container instance for that particular component.\n\n```hbs\n\u003cParticles\n  @url={{'http://foo.bar/particles.json'}}\n  @particlesInit={{this.particlesInit}}\n  @particlesLoaded={{this.loadedCallback}}\n/\u003e\n```\n```js\nimport { Component } from '@glimmer/component';\nimport { loadFull } from 'tsparticles';\n\nexport default class ExampleComponent extends Component {\n  async particlesInit(engine) {\n    await loadFull(engine);\n  }\n\n  loadedCallback(container) {\n    console.log(\n      'A callback function can be passed which triggers when the particles are loaded',\n      container\n    );\n  }\n}\n```\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsparticles%2Fember","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsparticles%2Fember","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsparticles%2Fember/lists"}