Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/loaderb0t/confetti.ts
Canvas Confetti in TypeScript
https://github.com/loaderb0t/confetti.ts
Last synced: 10 days ago
JSON representation
Canvas Confetti in TypeScript
- Host: GitHub
- URL: https://github.com/loaderb0t/confetti.ts
- Owner: LoaderB0T
- License: mit
- Created: 2022-07-14T12:08:27.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-29T12:40:32.000Z (7 months ago)
- Last Synced: 2024-04-29T14:03:29.560Z (6 months ago)
- Language: TypeScript
- Size: 1.83 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/confetti.ts)
[](https://github.com/LoaderB0T/confetti.ts/actions/workflows/build.yml)
[](https://sonarcloud.io/summary/new_code?id=LoaderB0T_confetti.ts)
[](https://bundlephobia.com/package/confetti.ts)
# confetti.ts
Canvas Confetti in TypeScript!
## Motivation 💥
This small package provides some simple particle animations in TypeScript.
## Examples 🧮
## Features 🔥
✅ Spawn particles on your website
✅ Control the size, color, rotation, velocity and acceleration of the particles
✅ Extendable particle shapes (Add your own particles!)
✅ Framework independent
✅ Strongly typed (when using TypeScript)
✅ ESM & CJS exports
✅ Lightweight: Zero dependencies
## Built With 🔧
- [TypeScript](https://www.typescriptlang.org/)
## Getting Started 🚀
```typescript
// Minimal example
import { CircleParticle } from 'cofetti.ts';
CircleParticle.draw({
position: {
x: 50,
y: 300
},
radius: 20,
color: 'red'
});
// Moving example
CircleParticle.draw({
position: {
x: 100,
y: 300
},
radius: 20,
color: 'red',
movementXY: {
velocity: {
y: 0.5 // Slowly moves down
}
}
});
// Accelerating example
CircleParticle.draw({
position: {
x: 150,
y: 300
},
radius: 20,
color: 'red',
movementXY: {
velocity: {
y: -7, // Moves upwards initially
x: 1 // Slightly moves right all the time
},
acceleration: {
y: 0.1 // But then "gravity" pulls it down
}
}
});
// Example with angled movement
CircleParticle.draw({
position: {
x: 200,
y: 300
},
radius: 20,
color: 'red',
movementAngle: {
angle: 35,
velocity: {
x: 1
},
acceleration: 0.05
}
});
// Example with rotation
RectParticle.draw({
position: {
x: 250,
y: 300
},
width: 20,
height: 10,
color: 'magenta',
rotation: {
velocity: {
x: 3,
z: 4
}
}
});
```
## Playground 🎮
--- TODO ---
## Contributing 🧑🏻💻
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License 🔑
Distributed under the MIT License. See `LICENSE.txt` for more information.
## Contact 📧
Janik Schumacher - [@LoaderB0T](https://twitter.com/LoaderB0T) - [linkedin](https://www.linkedin.com/in/janikschumacher/)
Project Link: [https://github.com/LoaderB0T/confetti.ts](https://github.com/LoaderB0T/confetti.ts)