Live Preview: https://confettishow.framer.website/
ConfettiShow is a high-performance canvas-based confetti system built to bring energy, motion, and celebration to any Framer project. Rendered entirely on an HTML canvas with requestAnimationFrame, it delivers smooth, fluid animation without touching the DOM for each particle, keeping performance consistent even at high particle counts.
Every piece of confetti is generated with full 3D tumble physics. Each particle carries independent rotation values across all three axes, and a foreshortening technique — scaling width and height by the cosine of each rotation angle — simulates realistic depth as pieces spin and flip in space. The result is a convincing three-dimensional motion system without the overhead of WebGL.
ConfettiShow supports three distinct emission modes. Rain spawns particles continuously from any edge with configurable gravity direction, allowing confetti to fall downward, float upward, or drift horizontally. Burst fires particles radially from the center of the canvas, creating an explosive celebration effect. Cannon launches confetti from both bottom corners at angled trajectories, arcing naturally under gravity for a classic party-popper look.
Nine particle shapes are available including rectangles, squares, diamonds, circles, ovals, sparkle stars, five-point stars, hearts, and lightning bolts. Seven built-in color presets — Custom, Pastel, Neon, Gold, Pride, Christmas, and Monochrome — let designers match any visual style instantly. Physics parameters including fall speed, gravity, wind, turbulence, and rotation speed give fine-grained control over how the animation feels.
A built-in Demo Mode panel lets you explore all configurations live inside Framer, making it easy to present and demonstrate the component without leaving the canvas.
What's Included
ConfettiShow component file ready to paste into any Framer project
3 emission modes: Rain, Burst, and Cannon
9 particle shapes: Rectangle, Square, Diamond, Circle, Oval, Sparkle Star, 5-Point Star, Heart, Lightning Bolt
7 color presets: Custom, Pastel, Neon, Gold, Pride, Christmas, Monochrome
4 gravity directions for Rain mode: Down, Up, Left, Right
Full physics controls: Fall Speed, Gravity, Wind, Turbulence, Rotation Speed
Opacity range, particle count, and size min/max controls
Top mask, fade-out edge, and 3D tumble toggle
4 trigger modes: Auto, On Click, On Hover, External Variable
Loop mode with optional duration timer
Built-in Demo Mode panel for live presentations
How It Works
Add the component to your Framer project and resize it to fit your layout. Set the trigger to Auto for a continuous effect, or choose Click or Hover to make it interactive. Select an emission mode — Rain falls from any edge, Burst explodes from the center, and Cannon fires from both bottom corners. Pick a color preset or define your own palette, then adjust physics sliders to fine-tune the feel. Enable Demo Mode to explore all settings live on the canvas without opening the property panel.
Use Cases
SaaS onboarding flows & account activation success screens
E-commerce order confirmation & purchase celebration moments
Gamification systems & achievement unlocked interactions
Contest, giveaway & sweepstakes winner announcement pages
New Year, holiday & seasonal campaign landing pages
Product launch countdowns & go-live celebration screens
Subscription upgrade & plan confirmation feedback states
Form submission success & lead capture thank-you pages
Mobile app milestone & streak reward moments
Event registration & ticket purchase confirmation flows
Fundraising goal reached & donation campaign success pages
Interactive portfolios & agency showcase presentations
Loyalty program reward & points milestone celebrations
Beta launch pages & early access sign-up confirmations
Wedding, birthday & personal event invitation microsites
Keywords
confetti, confetti animation, canvas confetti, particle animation, celebration animation, confetti component, 3D confetti, falling confetti, confetti rain, confetti burst, confetti cannon, party animation, particle system, physics animation, celebration effect, confetti framer, framer confetti, animated confetti, interactive confetti, confetti on click, confetti on hover, confetti trigger, confetti loop, confetti shapes, custom confetti, colorful confetti, confetti colors, color presets, pastel confetti, neon confetti, gold confetti, holiday confetti, christmas confetti, confetti particles, particle shapes, heart confetti, star confetti, lightning confetti, confetti physics, gravity animation, particle physics, confetti performance
Ahmet Loca
