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. +
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. +
ribbons()
setTimeout
You can control where ribbons spawn by setting the positionX option:
positionX
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. +
emitterSize
+ 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: +
setInterval
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. +
+ 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. +
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. +
+ 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. +
+ Ribbon animations use the HTML5 Canvas API and are GPU-accelerated in modern browsers. For + the best performance: +
+ tsParticles is designed to be performant, with efficient particle pooling and minimal + garbage collection overhead. +
+ tsParticles Ribbons integrates seamlessly with modern JavaScript frameworks. The official + @tsparticles/react, @tsparticles/vue, and + @tsparticles/angular packages provide dedicated components that make + integration straightforward. +
@tsparticles/react
@tsparticles/vue
@tsparticles/angular
Install the required packages:
npm install @tsparticles/ribbons @tsparticles/react
Create a ribbons component:
import { useCallback } from 'react'; +import { Particles } from '@tsparticles/react'; +import { ribbons } from '@tsparticles/ribbons'; + +export const RibbonsBackground = () => { + const particlesInit = useCallback(async (engine) => { + await ribbons.init(engine); + }, []); + + const options = { + preset: 'ribbons', + background: { + color: '#000000', + }, + fullScreen: { + enable: true, + }, + }; + + return ( + <Particles + id="ribbons" + init={particlesInit} + options={options} + /> + ); +};
+ The Particles component handles canvas creation, resizing, and lifecycle + management automatically. Pass your ribbon configuration through the + options prop. +
Particles
options
+ For event-based ribbons (like button clicks), use the ribbons() function + directly: +
import { ribbons } from '@tsparticles/ribbons'; + +function CelebrationButton() { + const handleClick = () => { + ribbons({ + colors: ['#FFD700', '#FFA500'], + positionX: 50, + emitterSize: { width: 0, height: 0 }, + }); + }; + + return <button onClick={handleClick}>Celebrate!</button>; +}
Install the packages:
npm install @tsparticles/ribbons @tsparticles/vue3
Register the plugin and use the component:
import { createApp } from 'vue'; +import { ParticlesPlugin } from '@tsparticles/vue3'; +import { ribbons } from '@tsparticles/ribbons'; + +const app = createApp(App); +app.use(ParticlesPlugin, { + init: async (engine) => { + await ribbons.init(engine); + }, +}); +app.mount('#app');
Then in your component template:
<template> + <Particles + id="ribbons" + :options="{ + preset: 'ribbons', + background: { color: '#000000' }, + fullScreen: { enable: true }, + }" + /> +</template>
For Vue 2.x, use @tsparticles/vue2 instead. The API is identical.
@tsparticles/vue2
npm install @tsparticles/ribbons @tsparticles/angular
Import the module and initialize ribbons:
import { NgParticlesModule } from '@tsparticles/angular'; +import { ribbons } from '@tsparticles/ribbons'; + +@NgModule({ + imports: [ + NgParticlesModule.init({ + init: async (engine) => { + await ribbons.init(engine); + }, + }), + ], +}) +export class AppModule { }
Use the component in your template:
<ng-particles + [id]="'ribbons'" + [options]="{ + preset: 'ribbons', + background: { color: '#000000' }, + fullScreen: { enable: true }, + }" +></ng-particles>
+ For Svelte applications, use the @tsparticles/ribbons package directly with + Svelte's onMount lifecycle: +
@tsparticles/ribbons
onMount
<script> + import { onMount } from 'svelte'; + import { ribbons } from '@tsparticles/ribbons'; + + onMount(async () => { + await ribbons.init(); + ribbons(); + }); +</script>
Or use the svelte-particles package for a component-based approach.
svelte-particles
If you're using jQuery, simply include the script tag and call ribbons():
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/ribbons@latest/tsparticles.ribbons.bundle.min.js"></script> +<script> + $(document).ready(function () { + ribbons(); + }); +</script>
+ No additional plugin is needed — the ribbons function is available globally + after including the bundle. +
ribbons
+ All tsParticles packages include TypeScript definitions. The ribbons() function + and the create() method are fully typed, providing autocomplete and type + checking in your IDE. +
create()
import { ribbons, type RibbonsOptions } from '@tsparticles/ribbons'; + +const options: RibbonsOptions = { + colors: ['#FF0000', '#00FF00', '#0000FF'], + positionX: 50, +}; + +ribbons(options);
Type definitions are included in the package and require no additional installation.
+ 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. +
+ 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. +
+ 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. +
init()
create
+ 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: +
ribbons.create()
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();
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. +
+ 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. +
+ 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. +
Tutorials, guides, and news about creating ribbon animations with tsParticles.
June 9, 2026
+ Learn how to add beautiful ribbon animations to your website with just a few lines of + code. This guide covers installation, basic setup, and the default ribbon configuration. +
+ Discover how to customize every aspect of your ribbon animations — colors, physics, + positioning, and timing. Create unique effects that match your brand. +
+ Step-by-step instructions for integrating tsParticles Ribbons into popular JavaScript + frameworks including React, Vue.js, Angular, and Svelte. +
Last updated: June 9, 2026
- This website uses optional cookies to improve content quality and to support the project - with ads. + This website uses optional cookies and local storage to improve content quality and to + support the project with ads. This policy explains what cookies we use, why we use them, and + how you can control them.
- Analytics: used to understand aggregate usage of the website through Google - Analytics. + Cookies are small text files stored on your device by your web browser. They are widely used + to make websites work more efficiently and to provide information to site owners. Local + storage is similar but stores data directly in your browser without sending it to the server + on every request.
Advertising: used to show ads through Google AdSense.
- Analytics cookies and personalized advertising are enabled only after explicit consent. You - can reject all, accept all, or save a custom choice from the privacy banner. + We use browser localStorage (not cookies) to store your cookie consent preferences under the + key tsparticles-ribbons/cookie-consent-v1. This preference is stored locally + and is not sent to any server. No essential cookies are used by this website. +
tsparticles-ribbons/cookie-consent-v1
Provider: Google Analytics (Measurement ID: G-CQTMTXX07T)
+ Purpose: Used to understand aggregate usage of the website. We collect anonymized + data about which pages are visited, how long visitors stay, and what browser or device they + use. This helps us improve the website's content and user experience. +
+ Data collected: Anonymized IP address, page URLs, browser type, device type, + approximate country-level location, referral source. No personally identifiable information + is collected or stored. +
Retention: Analytics data is retained for 26 months.
+ Analytics cookies are loaded only after you give explicit consent. If you reject analytics + cookies, the website still uses Google Consent Mode to send a signal that analytics consent + was denied, enabling cookieless measurement without storing any cookies. +
Provider: Google AdSense (Publisher ID: pub-1784552607103901)
+ Purpose: Used to show relevant advertisements on the website. AdSense helps support + the ongoing development and maintenance of the tsParticles open-source project. +
+ Data collected: When you consent to advertising, Google AdSense may use cookies to + show personalized ads based on your browsing interests. Data collected may include browser + information, device type, and anonymous browsing patterns.
- If analytics cookies are rejected, the website can still use anonymous cookieless analytics - measurement (Google Consent Mode) without storing analytics cookies. + Advertising cookies are loaded only after you give explicit consent. If you reject + advertising cookies, AdSense still loads but operates in non-personalized mode, showing ads + based on the page content rather than your browsing history. Google Consent Mode signals + (ad_storage, ad_user_data, ad_personalization) are + set to denied when consent is not given.
ad_storage
ad_user_data
ad_personalization
denied
- You can change your choice at any time from the Cookie preferences button in the - website footer. + This website does not set any third-party cookies directly. However, Google Analytics and + Google AdSense may set their own cookies as described above. These services are governed by + their own privacy policies:
+ Analytics cookies and personalized advertising are enabled only after explicit consent. You + can manage your preferences in the following ways: +
Your preference is stored locally in your browser using localStorage under a consent key - dedicated to this website. + dedicated to this website. Clearing your browser data will reset these preferences. +
+ This website implements Google Consent Mode v2, which communicates your consent choices to + Google services through the following signals: +
analytics_storage
+ Additional privacy protections include ads_data_redaction (URL-level ad data is + redacted when consent is denied) and url_passthrough (improved conversion + measurement without cookies). +
ads_data_redaction
url_passthrough
+ If you have questions about this cookie policy, please open an issue on the + tsParticles GitHub repository.
Back to the homepage