{"id":20806095,"url":"https://github.com/dgtlss/confettea","last_synced_at":"2026-02-23T01:03:46.537Z","repository":{"id":247674346,"uuid":"826531092","full_name":"dgtlss/confettea","owner":"dgtlss","description":"🎉 A lightweight, customisable, javascript confetti effect generator for web applications. 🎊","archived":false,"fork":false,"pushed_at":"2024-11-16T00:43:42.000Z","size":10,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-01T17:16:04.367Z","etag":null,"topics":["confettea","confetti","javascript","javascript-library","javascript-vanilla","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dgtlss.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-09T22:16:04.000Z","updated_at":"2024-11-16T00:43:45.000Z","dependencies_parsed_at":"2024-07-10T02:33:38.357Z","dependency_job_id":"8814f398-a3e8-4119-a0a9-255e9ba8bf39","html_url":"https://github.com/dgtlss/confettea","commit_stats":null,"previous_names":["dgtlss/confettea"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgtlss%2Fconfettea","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgtlss%2Fconfettea/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgtlss%2Fconfettea/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgtlss%2Fconfettea/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dgtlss","download_url":"https://codeload.github.com/dgtlss/confettea/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252811315,"owners_count":21807922,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["confettea","confetti","javascript","javascript-library","javascript-vanilla","vanilla-javascript","vanilla-js"],"created_at":"2024-11-17T19:18:10.276Z","updated_at":"2026-02-23T01:03:41.510Z","avatar_url":"https://github.com/dgtlss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎉 Confettea\n\nConfettea is a lightweight, customisable confetti effect generator for web applications. It allows you to create dynamic and fun confetti bursts with support for various types of confetti, including colored shapes, emojis, images, and SVGs.\n\n## Features\n\n- customisable confetti burst with adjustable parameters\n- Support for multiple confetti types: colored shapes, emojis, images, and SVGs\n- Realistic physics simulation with gravity, decay, and random tumbling\n- Easy to integrate into any web project\n- No dependencies\n\n## Installation\n\nTo use Confettea.js in your project, simply include the script in your HTML file:\n\n```html\n\u003cscript src=\"path/to/confettea.js\"\u003e\u003c/script\u003e\n```\n\nYou can also install confettea using npm with the following command:\n```\nnpm install confettea\n```\n\nFor more information, please see the readme over on npmjs: https://www.npmjs.com/package/confettea\n\n## Usage\n\nAfter including the script, you can create a confetti burst using the `confettea.burst()` method. Here's a basic example:\n\n```javascript\nconfettea.burst({\n    particleCount: 100,\n    origin: { x: 0.5, y: 0.5 }\n});\n```\n\nThis will create a burst of 100 confetti particles from the center of the screen.\n\n### Customization\n\nConfettea.js offers many options for customization. Here's an example with more options:\n\n```javascript\nconfettea.burst({\n    particleCount: 200, \n    origin: { x: 0.5, y: 0.1 },\n    spread: 80,\n    startVelocity: 45,\n    colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00'],\n    shapes: ['square', 'circle'],\n    emojis: ['🎉', '🎊', '🥳', '🍾'],\n    images: ['path/to/image1.png', 'path/to/image2.png'],\n    svgs: ['path/to/svg1.svg', 'path/to/svg2.svg'],\n    ticks: 300,\n    gravity: 0.8,\n    decay: 0.95,\n    scalar: 1\n});\n```\n\n### Options\n\n- `particleCount`: Number of confetti particles (default: 100)\n- `origin`: Starting point of the burst, as a ratio of screen dimensions (default: { x: 0.5, y: 0.5 })\n- `spread`: Spread angle of the burst in degrees (default: 60)\n- `startVelocity`: Initial velocity of particles (default: 30)\n- `colors`: Array of colors for shaped confetti (default: ['#0000ff', '#ffff00', '#ff00ff', '#00ffff'])\n- `shapes`: Array of shapes for colored confetti ('square' or 'circle') (default: ['square', 'circle'])\n- `emojis`: Array of emoji strings to use as confetti\n- `images`: Array of image URLs to use as confetti\n- `svgs`: Array of SVG URLs to use as confetti\n- `ticks`: Duration of the animation in frames (default: 300)\n- `gravity`: Gravity effect on particles (default: 0.8)\n- `decay`: Velocity decay rate (default: 0.95)\n- `scalar`: Size multiplier for particles (default: 1)\n\n## Examples\n\n### Celebration Burst\n\n```javascript\nconfettea.burst({\n    particleCount: 150,\n    spread: 60,\n    origin: { y: 0.6 },\n    colors: ['#ffd700', '#ff0000', '#00ff00', '#0000ff'],\n    emojis: ['🎉', '🎊', '🏆', '👏']\n});\n```\n\n### Image Confetti\n\n```javascript\nconfettea.burst({\n    particleCount: 50,\n    spread: 120,\n    origin: { y: 0 },\n    images: ['logo.png', 'icon.svg']\n});\n```\n\n## Browser Compatibility\n\nConfettea.js uses modern JavaScript features and should work in all modern browsers. For older browser support, you may need to use a transpiler like Babel.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgtlss%2Fconfettea","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdgtlss%2Fconfettea","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgtlss%2Fconfettea/lists"}