1 / Add the script
<script src="/js/celebration.js"></script>Make success feel
impossible to miss.
Celebration.js is a free, dependency-free effects engine for confetti, fireworks, lightning, plasma, portals, elemental magic, advanced particle physics, generated sound cues, and dramatic error states.
- 0dependencies
- 140success visuals
- 70generated sounds
- 20error effects
The playground
Click around.
Click around.
Rate the explosions.
Every preset is numbered so you can compare effects quickly. Sound starts only after your first interaction and can be turned off at any time.
Showing 60 new effects, including lightning, plasma, portals, elemental forces, impacts, and kinetic systems.
Start anywhere
Make it come from the action.
Pass a selector, DOM element, or event target. Every success preset can originate behind that element. Random draws from all 140 styles; round-robin plays every style once before repeating.
Celebration.fireFrom('#shipButton', {
animation: 'random',
sound: 'random',
anchorPoint: 'center',
behind: true,
alert: false
});
LIVE TARGET
The burst is masked until it clears the button.
Visual sequence builder
Direct the whole moment.
Stack numbered effects, sounds, origins, delays, physics, and screen treatments. Preview the result, then copy the generated JavaScript.
StagesDelay is measured from the previous stage.
Two-minute install
One script.
One script.
One call.
Download the library or link directly while prototyping. For production, serve your own copy so you control caching and releases.
2 / Fire an effect
Celebration.fire({
animation: 118,
sound: 'explosive',
intensity: 'huge',
alert: false
});Celebration.js v2.0.3Readable source · dependency-free · MIT License
Download source ↓
Read documentation →
View on GitHub →
View license →
Small API, big range
Compose a whole moment.
Choose effects by number or name, rotate automatically, queue precise stages, add physics, and reproduce any result with a seed.
Direct control
playAnimation() and playSound() give you separate control over visual and audio feedback.
Smart rotation
Choose random, non-repeating round-robin, or a specific number/name independently for visuals and sounds.
Timed queues
Build bottom, top, and four-corner finales with per-step animation, sound, origin, and delay settings.
Error states
Render a full-screen visual with a custom icon, title, and real error message—without adding another dependency.
Physics fields
Add attraction, repulsion, edge collisions, directional cones, particle scaling, and automatic device performance limits.
Screen treatments
Combine source outlines with shake, flash, blur, chromatic distortion, mobile haptics, and source-derived colors.
Named combos
Launch reusable directors such as supernovaFinale, portalBreach, or everythingDetonates.
Deterministic motion
Pass a seed to reproduce a random selection and its particle layout exactly, or attach subtle effects to pointer movement.
Queued finale
Bottom. Top. Every corner.
Three stages, two sound cues, one call.
Made by Zyel
Free tools are useful.
Free tools are useful.
Finished products are better.
Zyel is a web consulting and product studio for organizations that need strategy, design, engineering, AI, automation, and operations to work as one system.
Talk about your project