Combining Ribbons and Confetti

June 9, 2026 by Matteo Bruni

tsParticles offers two powerful celebration effects: ribbons and confetti. While each looks great on its own, combining them creates a truly spectacular visual experience. Ribbons flow across the screen with organic, physics-driven curves while confetti rains down with colorful, tumbling particles. Together, they create a multi-layered celebration that's greater than the sum of its parts.

Why Combine Them?

Each effect brings something unique to the table:

• Ribbons provide flowing, curved movement with smooth physics. They feel organic and elegant, drifting gracefully across the viewport.
• Confetti adds density and variety — colorful pieces rain down from above, tumbling and spinning as they fall, creating a sense of abundance and excitement.

When layered together, ribbons give the scene structure and flow while confetti fills the gaps with vibrant, chaotic energy. The contrast between the two creates visual depth that neither effect achieves alone.

Basic Combination

The simplest way to combine ribbons and confetti is to call both functions in a staggered loop:

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

await ribbons.init();
await confetti.init();

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

const interval = setInterval(() => {
  if (Date.now() >= animationEnd) {
    return clearInterval(interval);
  }

  // Confetti raining from random positions across the top
  confetti({
    particleCount: 5,
    angle: 90,
    spread: 70,
    origin: { x: Math.random(), y: 0 },
    gravity: 1.2,
    colors: ['#FFD700', '#FF69B4', '#00CED1', '#FF4500'],
  });

  // Ribbons flowing across
  ribbons({
    colors: ['#FF4500', '#FFD700', '#FF69B4', '#00CED1'],
  });
}, 320);

Confetti drops from random positions along the top edge while ribbons flow from above, creating a layered rain effect — colorful particles tumbling down while ribbons drift gracefully through them.

Color Coordination

The key to a polished look is coordinating colors between the two effects. Use the same palette for both, but let each effect interpret the colors differently:

const celebrationColors = ['#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1'];

confetti({
  particleCount: 5,
  spread: 70,
  origin: { y: 0.6 },
  colors: celebrationColors,
});

ribbons({
  colors: celebrationColors,
});

Since confetti uses solid-colored shapes and ribbons use gradient fills, the same colors will look slightly different in each context — creating visual variety without clashing.

Timing Strategies

How you time the two effects dramatically changes the feel:

Simultaneous Burst

Fire both at the same time for maximum impact — great for the moment a user completes a significant action:

// Big simultaneous celebration
confetti({ particleCount: 100, spread: 100, origin: { y: 0.5 } });
ribbons();
ribbons();

Staggered Cascade

Start confetti first, then layer ribbons a moment later for a building effect:

confetti({ particleCount: 80, spread: 90, origin: { y: 0.4 } });

setTimeout(() => {
  ribbons({
    colors: ['#FFD700', '#FFA500'],
  });
}, 300);

Continuous Background

Light, ongoing rain of both effects for ambient celebration:

setInterval(() => {
  confetti({
    particleCount: 2,
    spread: 40,
    origin: { y: 0 },
    gravity: 0.8,
    colors: ['#FFD700', '#FF69B4'],
  });

  ribbons({
    count: 5,
  });
}, 500);

Event-Triggered Combos

Combine both effects in response to user actions for memorable interactions:

document.getElementById('subscribe-btn').addEventListener('click', async function (e) {
  const btn = e.currentTarget;
  await ribbons.init();
  await confetti.init();

  // Immediate confetti burst
  confetti({
    particleCount: 120,
    spread: 100,
    origin: { y: 0.7 },
    colors: ['#FFD700', '#FF69B4', '#4ECDC4'],
  });

  // Ribbons follow after a beat
  setTimeout(() => {
    ribbons({
      colors: ['#FFD700', '#FF69B4', '#4ECDC4'],
    });
  }, 150);

  // Second wave
  setTimeout(() => {
    confetti({
      particleCount: 60,
      spread: 80,
      origin: { y: 0.6 },
    });
  }, 600);

  // Show success state
  btn.textContent = 'Subscribed!';
  btn.disabled = true;
});

Performance Considerations

Running both effects simultaneously is more demanding than either alone. Keep these guidelines in mind:

• Limit concurrent confetti: Use lower particleCount values (3-5 per burst) when combining with ribbons
• Keep durations short: 4-6 seconds is the sweet spot for combined effects
• Avoid mobile overload: On mobile, consider using only one effect or reducing particle counts significantly
• Use requestAnimationFrame: For continuous combos, sync with the browser's render cycle for smoother animation

For detailed performance optimization tips, see the performance optimization guide.

Try It Live

You can experiment with the ribbons and confetti combination directly on the playground page. The "Ribbons + Confetti" mode demonstrates this exact pattern — click "Run" to see the double celebration effect in action.

For more examples, check out the real-world examples guide or explore the customization guide to fine-tune the effects for your specific use case.