https://github.com/jlumbroso/js-confetti-animation
A quick confetti animation to positively reinforce the user! 🎉🥳🏅
https://github.com/jlumbroso/js-confetti-animation
Last synced: 3 months ago
JSON representation
A quick confetti animation to positively reinforce the user! 🎉🥳🏅
- Host: GitHub
- URL: https://github.com/jlumbroso/js-confetti-animation
- Owner: jlumbroso
- License: unlicense
- Created: 2024-12-16T05:24:22.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-12-16T05:31:33.000Z (10 months ago)
- Last Synced: 2025-04-11T21:39:35.995Z (6 months ago)
- Language: JavaScript
- Homepage: https://jlumbroso.github.io/js-confetti-animation/
- Size: 9.77 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎉 Confetti Animation
A lightweight, customizable confetti animation system extracted and enhanced from GitHub's Copilot celebration page.
## Overview
This confetti animation system provides a fun and engaging way to add celebratory effects to your web pages. It features:
- Multiple animation modes (burst, timed, infinite)
- Customizable colors and behavior
- Smooth particle physics
- Performance optimizations
- Clean, modular code
## Origin
This code was originally extracted from GitHub's Copilot checkout success page, where it creates a celebratory effect. The code was identified and extracted with the help of Anthropic's Claude Sonnet 3.5 AI, then refactored and extended to provide more features and flexibility.
## Usage
1. Include the script in your HTML:
```html
```
2. Create and start the animation:
```javascript
// Basic usage
const confetti = new Confetti();
confetti.start();
// With custom options
const customConfetti = new Confetti({
colors: ['#FFD700', '#FF1493', '#00CED1'],
fadeOut: true,
maxParticles: 150,
gravity: 0.15,
drift: 0.3
});
// Different animation modes
confetti.start('untilComplete'); // Single burst
confetti.start(5000); // Run for 5 seconds
confetti.start(null); // Run indefinitely
// Stop the animation
confetti.stop();
```
### Configuration Options
- `colors`: Array of color hexcodes
- `streamingMode`: Boolean for continuous particle spawning
- `spawnRate`: Time between particle spawns (ms)
- `gravity`: Base fall speed
- `drift`: Horizontal movement range
- `rotationSpeed`: Base rotation speed
- `fadeOut`: Enable fade out at bottom
- `maxParticles`: Maximum particles on screen
## Demo
Check out `index.html` for a complete implementation example showing different animation modes and styles.
## License
This project is released under The Unlicense.