tsParticles Ribbons Bundle

tsParticles ribbons bundle to create animated ribbons effects with a single API.

Demo website: https://ribbons.js.org

Exposed API

The package API is centered on ribbons.

import { ribbons } from "@tsparticles/ribbons";

await ribbons(options);
await ribbons("canvas-id", options);

await ribbons.init();
const fireOnCanvas = await ribbons.create(canvas, defaultOptions);
await fireOnCanvas(options);

console.log(ribbons.version);
Copy

Installation

pnpm add @tsparticles/ribbons
Copy

How to use it

import { ribbons } from "@tsparticles/ribbons";

await ribbons({
  count: 5,
  spread: 0,
  position: { x: 50, y: 0 },
});
Copy

With advanced ribbon shape customization:

import { ribbons } from "@tsparticles/ribbons";

await ribbons({
  ribbonOptions: {
    count: 70,
    oscillationDistance: {
      min: 120,
      max: 170,
    },
  },
});
Copy

Options

Main options:

• count Integer (default: 5)
• angle Number (default: 90)
• spread Number (default: 0)
• drift Number (default: 0)
• ticks Number (default: 200)
• position Object (x/y, default 50/0)
• colors Array<String>
• ribbonOptions Object (particles.shape.options.ribbon)
  • Includes darken: { enable: true, value: 30 } by default
• scalar Number (default: 1)
• zIndex Integer (default: 100)
• disableForReducedMotion Boolean (default: true)

The ribbons bundle disables roll, rotate, tilt, and wobble on ribbon particles by default for better shape stability. The emitter uses a full-width top strip (width: 100, height: 0) and downward movement speed range (4..6) for a falling-from-top behavior.

Deprecated aliases still accepted:

• particleCount (use count)
• origin (use position)