🌜
🌞
svelte-particles

svelte-particles

v2.1.4

Official tsParticles Svelte Component - Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js (2.x and 3.x), Angular, jQuery, P

npm install svelte-particles

README

banner

svelte-particles

npm npm downloads

Official tsParticles SvelteJS component

Slack Discord Telegram

tsParticles Product Hunt svelte particle

Installation

npm install svelte-particles

or

yarn add svelte-particles

Usage

<script>
  import Particles from "svelte-particles";
  import { loadFull } from "tsparticles";

  let particlesUrl = "http://foo.bar/particles.json";

  let particlesConfig = {
    particles: {
      color: {
        value: "#000",
      },
      links: {
        enable: true,
        color: "#000",
      },
      move: {
        enable: true,
      },
    },
  };

  let onParticlesLoaded = (event) => {
    const particlesContainer = event.detail.particles;

    // you can use particlesContainer to call all the Container class
    // (from the core library) methods like play, pause, refresh, start, stop
  };

  let particlesInit = async (engine) => {
    // you can use main to customize the tsParticles instance adding presets or custom shapes
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(engine);
  };
</script>

<Particles
  id="tsparticles"
  options="{particlesConfig}"
  on:particlesLoaded="{onParticlesLoaded}"
  particlesInit="{particlesInit}"
/>

<!-- or -->

<Particles
  id="tsparticles"
  url="{particlesUrl}"
  on:particlesLoaded="{onParticlesLoaded}"
  particlesInit="{particlesInit}"
/>

SSR

The particles component isn't built for SSR, so you have to force the component to be called client side with async import.

You can see a sample below:

<script>
  import { onMount } from "svelte";
  import { loadFull } from "tsparticles";

  let ParticlesComponent;

  onMount(async () => {
    const module = await import("svelte-particles");

    ParticlesComponent = module.default;
  });

  let particlesUrl = "http://foo.bar/particles.json";

  let particlesConfig = {
    particles: {
      color: {
        value: "#000",
      },
      links: {
        enable: true,
        color: "#000",
      },
      move: {
        enable: true,
      },
    },
  };

  let onParticlesLoaded = (event) => {
    const particlesContainer = event.detail.particles;

    // you can use particlesContainer to call all the Container class
    // (from the core library) methods like play, pause, refresh, start, stop
  };

  let particlesInit = async (main) => {
    // you can use main to customize the tsParticles instance adding presets or custom shapes
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(main);
  };
</script>

<svelte:component
  this="{ParticlesComponent}"
  id="tsparticles"
  options="{particlesConfig}"
  on:particlesLoaded="{onParticlesLoaded}"
  particlesInit="{particlesInit}"
/>

<!-- or -->

<svelte:component
  this="{ParticlesComponent}"
  id="tsparticles"
  url="{particlesUrl}"
  on:particlesLoaded="{onParticlesLoaded}"
  particlesInit="{particlesInit}"
/>

TypeScript errors

A user reported me a TypeScript error (#3963), and that's because this Svelte component is built using TypeScript.

If someone is experiencing the same error, please follow these steps:

After that, everything should work as expected.

Demos

The demo website is here

https://particles.js.org

There's also a CodePen collection actively maintained and updated here

https://codepen.io/collection/DPOage

General

License
MIT
Typescript Types
Built-in
Tree-shakeable
Yes

Popularity

GitHub Stargazers
4,032
Community Interest
2,895
Number of Forks
472

Maintenance

Commits
10/219/2201,500
Last Commit
Open Issues
15
Closed Issues
313
Open Pull Requests
7
Closed Pull Requests
312

Versions

Versions Released
10/219/22015
Latest Version Released
Jul 28, 2022
Current Tags
latest2.1.4
beta2.0.0-beta.4
next2.0.4
alpha2.0.0-alpha.7

Contributors

matteobruni
matteobruni
Commits: 2,835
VincentGarreau
VincentGarreau
Commits: 624
Wufe
Wufe
Commits: 198
roslaneshellanoo
roslaneshellanoo
Commits: 72
renovate-bot
renovate-bot
Commits: 59
progers
progers
Commits: 57
PieceMaker
PieceMaker
Commits: 52
code-factor
code-factor
Commits: 26
TylerBurnett
TylerBurnett
Commits: 19
Himanshunitrr
Himanshunitrr
Commits: 15
SidiBecker
SidiBecker
Commits: 13
matteoums
matteoums
Commits: 10
Enhmunh-E
Enhmunh-E
Commits: 9
gabrielbarker
gabrielbarker
Commits: 7
gaurang7goel
gaurang7goel
Commits: 6