---
title: "Ribbon Wave"
canonical_url: "https://framerhub.io/components/ribbon-wave"
last_updated: "2026-06-15T14:46:31.135Z"
---

## Create Playful Celebrations

A vibrant 2D canvas-based confetti lines component with smooth animation, customizable colors, and physics-based gravity effects.

## Features

**Smooth Ribbon Lines**
Elegant confetti ribbons that flow smoothly across your canvas with customizable colors and patterns.

**Physics-Based Motion**
Optional gravity and turbulence effects create natural, organic movement that feels alive.

**Customizable Colors**
Choose up to 5 vibrant colors for your confetti ribbons. Lines will randomly use these colors.

**Performance Optimized**
Canvas-based 2D rendering ensures smooth performance across all devices.

## Use Cases

**Celebration Pages** — Perfect for success pages, achievement unlocks, and special announcements

**Hero Sections** — Add playful energy to landing pages and marketing sites

**Event Websites** — Ideal for party invitations, festival sites, and celebration events

**Interactive Backgrounds** — Create dynamic backgrounds that add movement without distraction

![Ribbon Wave Preview](/framerhub/img/components/control/ribbon-wave.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Ribbon Wave in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

Use the property controls to customize your confetti effect.

**Confetti Colors**

- Color 1-5 — Choose up to 5 vibrant colors for your confetti ribbons

**Background**

- Background Color — Set a background color for the confetti animation

**Animation**

- Spawn Rate — Control how frequently new confetti ribbons appear (0-10)
- Speed — Animation speed multiplier (0.1-5)
- Turbulence — Wind/turbulence intensity for more chaotic motion (0-5)
- Line Width — Thickness of the confetti ribbons (1-10)

**Physics**

- Enable Gravity — Toggle gravity to make confetti fall naturally or float freely

### Quick Tips

**Best Colors** — Use bright, contrasting colors for maximum visual impact. Try complementary color schemes for harmonious effects.

**Gravity On/Off** — Enable gravity for celebration effects (falling confetti). Disable for floating, dreamlike ribbons.

**Spawn Rate** — Lower spawn rates (1-3) feel elegant and subtle. Higher rates (5-10) create energetic, festive atmospheres.

**Turbulence** — Add turbulence for wind-blown effects. Combine with gravity for realistic confetti physics.

## Credits

Built upon [Animated Mesh Lines](https://github.com/Jeremboo/animated-mesh-lines) by [Jeremboo](https://jeremieboulay.fr/portfolio/) for [Codrops](https://tympanus.net/codrops/).

## Why Designers Love This

Bring celebrations to life with vibrant, physics-based confetti ribbons. Canvas-optimized for smooth performance on all devices, this component adds joy and energy to any Framer project.

---

**Need Help?** Visit framerhub.io/support for documentation and video tutorials.