Real-World Examples and Use Cases

June 9, 2026 by Matteo Bruni

One of the best ways to learn a new tool is to see how others use it. In this guide, we'll walk through real-world examples of tsParticles Ribbons in action — from product launch celebrations to ambient backgrounds — with complete, copy-paste-ready code snippets you can adapt for your own projects.

Product Launch Celebration

When you launch a new product or feature, a well-timed ribbon animation can create a moment of delight. Here's how to trigger a celebration when a user clicks a "Launch" button:

document.getElementById('launch-btn').addEventListener('click', async () => {
  await ribbons.init();

  // Gold and silver burst from center
  ribbons({
    colors: ['#FFD700', '#FFC0CB', '#FFFFFF', '#FF69B4'],
    positionX: 50,
    emitterSize: { width: 20, height: 0 },
  });

  // Second burst after a short delay
  setTimeout(() => {
    ribbons({
      colors: ['#00CED1', '#40E0D0', '#7FFFD4'],
      positionX: 50,
      emitterSize: { width: 40, height: 0 },
    });
  }, 200);
});

This creates a two-layered burst effect — an inner gold/pink burst followed by a wider turquoise wave — giving the celebration a sense of depth and progression.

Shopping Cart Success Effect

E-commerce sites can use ribbon animations to confirm actions. When a user adds an item to their cart, a subtle ribbon burst from the cart icon reinforces the action:

async function animateCartAdd(buttonElement) {
  await ribbons.init();

  const rect = buttonElement.getBoundingClientRect();
  const xPercent = (rect.left + rect.width / 2) / window.innerWidth * 100;

  ribbons({
    count: 12,
    colors: ['#4CAF50', '#8BC34A', '#CDDC39'],
    positionX: xPercent,
    emitterSize: { width: 10, height: 0 },
  });
}

// Usage
document.querySelector('.add-to-cart').addEventListener('click', function () {
  animateCartAdd(this);
  addToCart(this.dataset.productId);
});

Using fewer ribbons (12 instead of the default 30) keeps the effect subtle and non-intrusive, while the green color palette reinforces the positive action.

Ambient Page Background

For creative portfolios or landing pages, continuous ribbon animations can serve as a living background that adds visual interest without distracting from the content:

async function startAmbient() {
  await ribbons.init();

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

  // Spawn ribbons every 2 seconds
  function spawnLoop() {
    shoot();
    setTimeout(spawnLoop, 2000);
  }

  spawnLoop();
}

startAmbient();

The key here is using a custom canvas with zIndex: -1 so the ribbons render behind your content. The 2-second interval creates a gentle, flowing effect that doesn't overwhelm the page.

Holiday Theme Switcher

Seasonal websites can use ribbon color changes to match holidays. Here's a simple approach that ties ribbon colors to the current month:

const holidayColors = {
  january: ['#E8F5E9', '#C8E6C9', '#A5D6A7'],     // New Year silver/green
  february: ['#FCE4EC', '#F8BBD0', '#F48FB1'],    // Valentine pink
  march: ['#E8F5E9', '#C8E6C9', '#FFEB3B'],       // St. Patrick green/gold
  july: ['#E3F2FD', '#1565C0', '#FFD600'],         // Independence Day
  october: ['#4A148C', '#FF6F00', '#000000'],      // Halloween
  december: ['#C62828', '#FFD600', '#FFFFFF'],     // Christmas
};

const month = new Date().toLocaleString('en', { month: 'long' }).toLowerCase();
const colors = holidayColors[month] || ['#FF4500', '#FF6347', '#FFD700'];

ribbons({ colors });

This pattern is great for e-commerce sites, event pages, or any site that wants to feel timely and relevant.

Form Submission Feedback

Replace generic "success" messages with a visual celebration when a form is submitted successfully:

document.getElementById('contact-form').addEventListener('submit', async (e) => {
  e.preventDefault();

  const submitBtn = e.target.querySelector('button[type="submit"]');
  const rect = submitBtn.getBoundingClientRect();
  const x = (rect.left + rect.width / 2) / window.innerWidth * 100;

  await ribbons.init();

  // Burst of ribbons from the submit button
  ribbons({
    count: 20,
    colors: ['#2196F3', '#03A9F4', '#00BCD4', '#009688'],
    positionX: x,
    emitterSize: { width: 30, height: 0 },
  });

  // Show success message
  submitBtn.textContent = 'Sent!';
  submitBtn.disabled = true;
});

This creates a memorable moment that makes form submission feel rewarding instead of mundane.

Multi-Color Wave Effect

For dramatic page transitions or hero sections, you can create a wave of colors that sweeps across the screen:

async function colorWave() {
  await ribbons.init();

  const colors = [
    ['#FF0000', '#FF4500'],
    ['#FF8C00', '#FFD700'],
    ['#00FF00', '#32CD32'],
    ['#00BFFF', '#1E90FF'],
    ['#8A2BE2', '#9370DB'],
  ];

  colors.forEach((palette, i) => {
    setTimeout(() => {
      ribbons({
        colors: palette,
        positionX: 10 + i * 20,
      });
    }, i * 150);
  });
}

colorWave();

Each burst is positioned 20% further across the viewport, with 150ms delays creating a left-to-right wave effect. The color progression from red through the spectrum creates a rainbow wave.

Interactive Cursor Trail

You can create ribbons that follow the mouse cursor for an interactive experience. This works particularly well on portfolio sites and creative agencies:

async function cursorRibbons() {
  await ribbons.init();

  let lastTrigger = 0;
  const throttle = 400; // ms between bursts

  document.addEventListener('mousemove', (e) => {
    const now = Date.now();
    if (now - lastTrigger < throttle) return;
    lastTrigger = now;

    const x = (e.clientX / window.innerWidth) * 100;

    ribbons({
      count: 5,
      positionX: x,
      emitterSize: { width: 5, height: 0 },
    });
  });
}

cursorRibbons();

The 400ms throttle prevents too many ribbons from spawning at once, while the low count (5) keeps each burst lightweight. The result is a trail of ribbons that follows your cursor across the page.

Combining with Other Effects

Ribbons work great alongside other tsParticles effects. Here's how to combine them with particles for a rich, layered animation:

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

await ribbons.init();

// Add ambient particles first
await tsParticles.load('particles-bg', {
  particles: {
    number: { value: 30 },
    color: { value: '#ffffff' },
    move: { enable: true, speed: 0.5 },
    opacity: { value: 0.3 },
  },
});

// Then add ribbons on top
ribbons({
  colors: ['#FF6B6B', '#4ECDC4', '#45B7D1'],
});

The subtle particle background adds depth, while the ribbons provide the main visual impact. Together they create a more immersive experience than either effect alone.

Next Steps

These examples should give you a solid foundation for incorporating ribbon animations into your projects. Experiment with different configurations on the interactive playground, and check out the customization guide for more advanced options.

For performance tips when using these patterns, see the performance optimization guide.