{"id":23263316,"url":"https://github.com/jackwh/alpine-confetti","last_synced_at":"2025-07-24T11:43:22.458Z","repository":{"id":262082146,"uuid":"886170671","full_name":"jackwh/alpine-confetti","owner":"jackwh","description":"🎉 An Alpine.js plugin for canvas-confetti","archived":false,"fork":false,"pushed_at":"2025-06-23T12:32:32.000Z","size":49604,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-17T09:54:18.967Z","etag":null,"topics":["alpine","alpinejs","alpinejs-directive","canvas","canvas-confetti","confetti","tall-stack"],"latest_commit_sha":null,"homepage":"https://jackwh.github.io/alpine-confetti/","language":"TypeScript","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/jackwh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2024-11-10T11:48:28.000Z","updated_at":"2025-07-02T10:09:23.000Z","dependencies_parsed_at":"2024-11-10T12:35:00.311Z","dependency_job_id":"594b35bc-2e62-4e69-b5b9-8a5218897710","html_url":"https://github.com/jackwh/alpine-confetti","commit_stats":null,"previous_names":["jackwh/alpine-confetti"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/jackwh/alpine-confetti","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackwh%2Falpine-confetti","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackwh%2Falpine-confetti/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackwh%2Falpine-confetti/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackwh%2Falpine-confetti/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jackwh","download_url":"https://codeload.github.com/jackwh/alpine-confetti/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackwh%2Falpine-confetti/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266836324,"owners_count":23992589,"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","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["alpine","alpinejs","alpinejs-directive","canvas","canvas-confetti","confetti","tall-stack"],"created_at":"2024-12-19T14:17:00.114Z","updated_at":"2025-07-24T11:43:22.418Z","avatar_url":"https://github.com/jackwh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e🎉 Alpine Confetti\u003c/h1\u003e\n\n\u003cp align=\"center\" style=\"text-wrap: balance;\"\u003e\n  Turn any interaction into a moment of joy* with zero-config \u003ca href=\"https://alpinejs.dev\" target=\"_blank\"\u003eAlpine.js\u003c/a\u003e directives for \u003ca href=\"https://www.npmjs.com/package/canvas-confetti\" target=\"_blank\"\u003ecanvas-confetti\u003c/a\u003e.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@jackwh/alpine-confetti\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/v/tag/jackwh/alpine-confetti?label=version\" alt=\"version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@jackwh/alpine-confetti\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/@jackwh/alpine-confetti\" alt=\"downloads\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.jsdelivr.com/package/npm/@jackwh/alpine-confetti\"\u003e\n    \u003cimg src=\"https://data.jsdelivr.com/v1/package/npm/@jackwh/alpine-confetti/badge?style=rounded\" alt=\"JSDelivr\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@jackwh/alpine-confetti\"\u003e\n    \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/jackwh/alpine-confetti\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003csmall\u003e* Disclaimer: actual joy may vary.\u003c/small\u003e\n\u003c/p\u003e\n\n![Alpine Confetti banner](docs/assets/art.jpg)\n\n## ✨ Features\n\n- **Three presets**: ` 🎉 $confetti()`, `✨ $starburst()`, and `💩 $emojify()`\n- **Zero configuration**: Works out of the box with sensible defaults\n- **Highly customizable**: Full access to `canvas-confetti` options\n- **Smart positioning**: Automatically calculates element origins\n- **Accessibility friendly**: Respects `prefers-reduced-motion`\n- **TypeScript support**: Fully typed for better developer experience\n\n\n## 👀 Interactive Demo\n\n\u003e See interactive examples [on the Demo page](https://jackwh.github.io/alpine-confetti/) ➡️\n\n## 🚀 Quick Start\n\n### CDN Installation\n\nAdd Alpine Confetti to your page via CDN:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003c!-- Make sure the plugin is loaded before Alpine.js: --\u003e\n    \u003cscript defer src=\"https://cdn.jsdelivr.net/npm/@jackwh/alpine-confetti@latest/dist/browser.global.js\"\u003e\u003c/script\u003e\n    \u003cscript defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cbutton x-data x-on:click=\"$confetti()\"\u003e\n        🎉 Let's Party\n    \u003c/button\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### NPM Installation\n\n```bash\nnpm install @jackwh/alpine-confetti\n```\n\nThen register the plugin:\n\n```javascript\nimport AlpineConfetti from '@jackwh/alpine-confetti';\n\ndocument.addEventListener('alpine:init', () =\u003e {\n  AlpineConfetti(window.Alpine);\n});\n```\n\n## 🔧 Usage\n\n### Basic Confetti\n\nThe simplest way to add celebration to any element:\n\n```html\n\u003cdiv x-init=\"$confetti()\"\u003e\n  🎉 Congrats, you're our 1,000,000th user!\n\u003c/div\u003e\n```\n\n### Starburst Effect\n\nPerfect for achievements and special moments:\n\n```html\n\u003cbutton x-data x-on:click=\"$starburst(25)\"\u003e\n  ⭐ Add to Favorites\n\u003c/button\u003e\n```\n\n### Custom Effects\n\nYou can change the particle count by providing a number: `$confetti(50)`. Or pass an object [with `canvas-confetti` options](https://github.com/catdad/canvas-confetti?tab=readme-ov-file#options) for more control:\n\n```html\n\u003cbutton x-data x-on:click=\"$confetti({\n    particleCount: 200,\n    spread: 70,\n    colors: ['#e81416', '#ffa500', '#faeb36', '#79c314', '#487de7', '#4b369d', '#70369d']\n  })\"\u003e\n  👀 Many more options are available...\n  \u003c!-- https://github.com/catdad/canvas-confetti?tab=readme-ov-file#options --\u003e\n\u003c/button\u003e\n```\n\n### Emojify\n\nBecause sometimes regular particles just won't do...\n\n```html\n\u003cdiv x-init=\"$emojify(['🎂', '🎈', '🎁'], 50)\"\u003e\n    🎂 Happy Birthday to you!\n\u003c/div\u003e\n```\n\n## 🎨 Creative Example\n\nThere are lots of ways to use confetti effects interactively.\n \nHere's just one example, check out the rest on the [Demo page](https://jackwh.github.io/alpine-confetti/) for more ➡️\n\n```html\n\u003cbutton\n  x-data=\"{\n    isHovering: false,\n    volcano() {\n      if (this.isHovering) {\n        $confetti({\n          particleCount: Math.floor(Math.random() * 10),\n          colors: ['#1c1917', '#262626', '#09090b', '#57534e'],\n          angle: 75 + (Math.random() * 30),\n          gravity: 0.1 + (Math.random() * 0.2),\n          drift: Math.random() * (Math.random() \u003e 0.5 ? 1 : -1),\n          ticks: 10 + (Math.random() * 200),\n          spread: (Math.random() * 50),\n          startVelocity: 10 + (Math.random() * 10)\n        });\n      }\n      this.schedule();\n    },\n    schedule () {\n      setTimeout(() =\u003e this.volcano(), 250 * (Math.random() * 3));\n    }\n  }\"\n  x-init=\"schedule\"\n  x-on:mouseenter=\"isHovering = true\"\n  x-on:mouseleave=\"isHovering = false\"\n  x-on:click=\"$confetti({\n      particleCount: 100 + Math.floor(Math.random() * 200),\n      scalar: 1.5,\n      angle: 75 + (Math.random() * 30),\n      gravity: 0.2 + (Math.random() * 0.3),\n      drift: Math.random() * (Math.random() \u003e 0.5 ? 1 : -1),\n      ticks: 50 + (Math.random() * 250),\n      spread: 10 + (Math.random() * 50),\n      colors: ['#b91c1c', '#9a3412', '#f59e0b', '#fcd34d', '#292524', '#450a0a'],\n      startVelocity: 20 + (Math.random() * 10)\n  })\"\u003e\n  🌋 Click to Erupt \n\u003c/button\u003e\n```\n\nSee the [Demo page](https://jackwh.github.io/alpine-confetti/) to try this out.\n\n## 🎛️ API Reference\n\n### `$confetti(options?)`\n\nCreates a burst of confetti from the element.\n\n- **Parameter**: `number | Options` - Particle count or full options object\n- **Default**: 100 particles with colorful confetti\n\n### `$starburst(options?)`\n\nCreates a starburst effect with star-shaped particles.\n\n- **Parameter**: `number | Options` - Particle count or full options object  \n- **Default**: 10 yellow star particles in all directions\n\n### `$emojify(emojis, options?)`\n\nCreates confetti using custom emoji shapes.\n\n- **Parameters**: \n  - `emojis`: `string[]` - Array of emoji to use as particles\n  - `options`: `number | Options` - Particle count or full options object\n- **Default**: `['🍓', '🍌', '🥝']` with 10 particles\n\n## ⚙️ Configuration Options\n\nAll methods accept the full range of [canvas-confetti options](https://github.com/catdad/canvas-confetti?tab=readme-ov-file#options). Here's a quick reference for the most commonly used ones:\n\n```javascript\n{\n    particleCount: 100, // Number of particles\n    angle: 90,          // Direction in degrees\n    spread: 45,         // Spread in degrees\n    startVelocity: 45,  // Initial velocity\n    decay: 0.9,         // Particle decay rate\n    gravity: 1,         // Gravity strength\n    drift: 0,           // Side-to-side drift\n    ticks: 200,         // Particle lifetime\n    colors: ['#fff'],   // Color array\n    scalar: 1           // Size multiplier\n}\n```\n\nThe plugin respects the `prefers-reduced-motion` media query by default. Users with motion sensitivity won't see the animations.\n\n## 🙏 Credits\n\n- 🎊 [canvas-confetti](https://github.com/catdad/canvas-confetti)\n- ⛰️ [Alpine.js](https://alpinejs.dev)\n- 🎨 [Tailwind CSS](http://tailwindcss.com) (for demo styles)\n- 😎 [Jack Webb-Heller](https://github.com/jackwh)\n- 🫵 You? Contributions are welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackwh%2Falpine-confetti","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjackwh%2Falpine-confetti","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackwh%2Falpine-confetti/lists"}