@tsparticles/qwik

Official Qwik component wrapper for tsParticles.

Installation

pnpm add @tsparticles/qwik @tsparticles/engine

or

npm install @tsparticles/qwik @tsparticles/engine

or

yarn add @tsparticles/qwik @tsparticles/engine

Usage

Initialize tsParticles once in your app bootstrap, then use <Particles /> wherever needed.

import { component$, useSignal } from "@builder.io/qwik";
import { Particles, initParticlesEngine } from "@tsparticles/qwik";
import type { Engine } from "@tsparticles/engine";

void initParticlesEngine(async (engine: Engine) => {
  const [{ loadSlim }] = await Promise.all([import("@tsparticles/slim")]);

  await loadSlim(engine);
});

export default component$(() => {
  const loaded = useSignal(false);

  return (
    <Particles
      id="tsparticles"
      options={{
        fullScreen: {
          zIndex: -1,
        },
        particles: {
          number: { value: 80 },
          links: { enable: true },
          move: { enable: true },
        },
      }}
      loaded={async () => {
        loaded.value = true;
      }}
    />
  );
});

How init works

• initParticlesEngine should be called once per app lifecycle.
• All <Particles /> instances wait for init completion before loading.
• You can choose what to load inside init (@tsparticles/slim, tsparticles, or custom plugins).

Reactivity

The component reacts to prop changes:

• id change → destroys old container and creates a new one with the new id
• options change → destroys old container and creates a new one with the updated options
• url change → destroys old container and loads from the new remote URL
• theme change → applies the theme via loadTheme (without full reload)

On component unmount, the particles container is destroyed to prevent orphan animations.

Props

| Prop | Type | Definition | | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | id | string | The id of the element. | | width | string | The width of the canvas. | | height | string | The height of the canvas. | | options | object | The options of the particles instance. | | url | string | The remote options url, called using an AJAX request | | theme | string | The theme name to apply. Requires @tsparticles/plugin-themes to be loaded. Without the plugin, this prop is a safe no-op. | | style | object | The style of the canvas element. | | class | string | The class name of the canvas wrapper. | | canvasClassName | string | The class name of the canvas. | | container | object | The instance of the particles container | | loaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here |

Find your parameters configuration here.

Demos

The demo website is here.

There is also a CodePen collection actively maintained and updated here.