Getting Started with tsParticles Ribbons

June 9, 2026 by Matteo Bruni

tsParticles Ribbons lets you add beautiful, flowing ribbon animations to your website with minimal effort. Whether you want a subtle background effect or an eye-catching interactive element, ribbons provide a elegant way to enhance your site's visual appeal.

Quick Start with a Script Tag

The fastest way to add ribbons to any HTML page is with the CDN bundle. Add this script tag to your page:

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/ribbons@latest/tsparticles.ribbons.bundle.min.js"></script>

Then call the ribbons() function anywhere in your JavaScript:

ribbons();

That's it. By default, ribbons will fall from random positions across the top of the page with vibrant colors and smooth physics.

Installation via npm

If you're using a build tool like Vite, webpack, or Rollup, install the package from npm:

npm install @tsparticles/ribbons

Then import and call it in your JavaScript:

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

await ribbons.init();
ribbons();

The init() method is required once before creating any ribbon animations. It loads the necessary engine and plugins.

Using the create Method

For more control, use the ribbons.create() method. This returns a function bound to a specific canvas element, letting you control exactly where ribbons appear:

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

await ribbons.init();

const canvas = document.getElementById('my-canvas');
const shoot = await ribbons.create(canvas, {
  zIndex: 0,
});

// Fire a burst of ribbons
shoot();

Creating from Scratch with npm create

You can scaffold a complete project with the official template:

npm create ribbons@latest

This will create a new directory with a pre-configured project that includes the ribbons package, a sample HTML file, and a build setup.

What Happens When You Call ribbons()

When you invoke the ribbons() function, it creates a burst of ribbon-like particles that animate across the screen. Each ribbon is a curved strip that follows a physics simulation, creating a natural, organic feel. The ribbons are rendered on a full-screen canvas overlay by default, giving the impression of floating or falling ribbons on top of your page content.

The default configuration spawns ribbons from a random position along the top edge of the viewport. Each ribbon has a random color from a preset palette, a random velocity, and a natural gravity effect that pulls it downward while it drifts and rotates.

Next Steps

Once you have ribbons running, explore the customization guide to learn how to change colors, physics, and positioning. For framework-specific integration, check the framework integration guide.

You can also experiment with all the options interactively on the playground page, where each mode comes with a live code editor.