Ribbon Wave FREE
2D canvas-based confetti ribbon lines with smooth animation and gravity.
Overview
2D canvas-based confetti ribbon lines with smooth animation and gravity.
- Smooth confetti ribbon lines with customizable colors
- Gravity and turbulence effects for natural motion
- Canvas-based 2D animation for optimal performance
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
How to Use
Installation
VIDEO PLACEHOLDER: Installation Tutorial
- Log in to your account at framerhub.io
- Navigate to framerhub.io/dashboard
- Find Ribbon Wave in your Recent Purchases
- Click the "Copy" button
- Open your Framer project
- 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 by Jeremboo for 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.
Ribbon Wave - FREE
2D canvas-based confetti ribbon lines with smooth animation and gravity.
You might also like
Curved Text SVG
Animate text along any SVG path with smooth GSAP-powered motion.
Exist Popup
Capture leads before they leave with smart exit-intent popups that trigger at the perfect moment.
Confetti Lines 3D
3D confetti lines with smooth dash animations and mouse interaction.
Why Choose Framer Hub Components
Loved by Framer teams
Used by Framer professionals who need premium, no-code experiences.
"The Best Framer CMS Filtering Plugin I've Found — Truly a Game-Changer. I've tested a lot of Framer CMS filtering and sorting components — both free and paid — and this is by far the best one I've come across."
"He really helped me out when I needed assistance adding it to my Framer project. Super fast customer support highly recommend!"
"We had tried a couple of other Framer CMS filter components but they were buggy, hard to use and support was slow or non-existent. FramerCMSFilter is easier to use and has a lot of added functionality."
Got questions? We've the answers
Got questions? We've the answers
Everything you need to know about FramerHub.