Customizing Ribbon Animations

June 9, 2026 by Matteo Bruni

tsParticles Ribbons offers a wide range of customization options. You can change colors, adjust physics, control positioning, and even create multi-layered effects by combining multiple calls.

Custom Colors

By default, ribbons use a preset palette, but you can provide your own color array:

ribbons({
  colors: ['#FF4500', '#FF6347', '#FFD700', '#FF8C00', '#FF0000'],
});

Colors can be any valid CSS color: hex codes, RGB, HSL, or named colors. You can create themed effects like ocean blues, sunset oranges, or holiday reds and greens. To create a smooth transition between two color themes, call ribbons() multiple times with different color palettes and stagger them with setTimeout.

Position Control

You can control where ribbons spawn by setting the positionX option:

ribbons({
  positionX: 50, // spawn at x=50 (percentage-based)
  emitterSize: { width: 0, height: 0 }, // point emitter
});

The positionX value is a percentage (0-100) of the viewport width. Setting emitterSize to zero creates a point emitter, making all ribbons originate from a single pixel. This is great for effects that look like ribbons shooting from a specific button or element.

Physics and Timing

Ribbon animations are driven by tsParticles' physics engine. While the ribbons preset provides sensible defaults, you can fine-tune the behavior through the underlying particle configuration. The physics parameters that affect ribbons include gravity, velocity, rotation, and decay rates.

For continuous effects, you can use setInterval to spawn ribbons repeatedly:

const duration = 8000;
const animationEnd = Date.now() + duration;

const interval = setInterval(function () {
  const timeLeft = animationEnd - Date.now();
  if (timeLeft <= 0) {
    return clearInterval(interval);
  }
  ribbons();
}, 260);

This creates a continuous fall effect for 8 seconds, with a new burst every 260 milliseconds. Adjust the interval and duration to control density and length of the animation.

Multiple Bursts

You can layer multiple ribbon bursts with staggered timing for a rich, cascading effect:

ribbons();

setTimeout(() => {
  ribbons();
}, 300);

setTimeout(() => {
  ribbons();
}, 600);

Each call creates an independent burst with its own set of ribbons. This technique is perfect for celebrations, page load animations, or dramatic entrances.

Custom Canvas

To keep ribbons within a specific area of your page, provide your own canvas element:

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

shoot();

This is useful when you want ribbons as a background for a specific section, or when you need to avoid overlapping with interactive elements like forms or navigation menus.

Combining Options

You can combine all these options to create unique effects. For example, a fireworks-style ribbon burst from a fixed position with custom colors:

ribbons({
  positionX: 50,
  emitterSize: { width: 0, height: 0 },
  colors: ['#FFD700', '#FFA500', '#FF6347'],
});

Experiment with different combinations on the interactive playground to find the perfect effect for your project.

Performance Considerations

Ribbon animations use the HTML5 Canvas API and are GPU-accelerated in modern browsers. For the best performance:

• Avoid creating too many simultaneous bursts (more than 3-4 concurrent animations may impact performance on lower-end devices).
• Use a custom canvas for section-specific animations rather than full-screen overlays when possible.
• Set reasonable duration limits for continuous animations (8-15 seconds is a good range).
• Test on mobile devices to ensure smooth performance.

tsParticles is designed to be performant, with efficient particle pooling and minimal garbage collection overhead.