# A TC of fun: Discourse Confetti Clicks

**URL:** https://meta.discourse.org/t/a-tc-of-fun-discourse-confetti-clicks/331148
**Category:** Theme component
**Created:** [October 16, 2024, 12:41pm UTC](https://meta.discourse.org/t/a-tc-of-fun-discourse-confetti-clicks/331148 "2024-10-16T12:41:12Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [October 16, 2024, 12:41pm UTC](https://meta.discourse.org/t/a-tc-of-fun-discourse-confetti-clicks/331148/1 "2024-10-16T12:41:12Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **Summary** | Add fun to your community by having confetti where you click, using tsParticles. |
| 👓 | **Preview** | [Theme Creator](https://discourse.theme-creator.io/theme/NateDhaliwal/confetti-clicks) |
| 🛠 | **Repository** | [GitHub - NateDhaliwal/discourse-confetti-clicks · GitHub](https://github.com/NateDhaliwal/discourse-confetti-clicks) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

This theme component creates confetti where the user clicks or taps. The amount of confetti and the angle of spread of confetti can both be controlled using settings.  
This TC creates more fun for your community to make it more interactive.  
The confetti is made possible with tsParticles, a JS library for animating confetti, snow, lines and more.  
Some assistance came from [ask.discourse.com](http://ask.discourse.com).

Settings:

1. `confetti_amount` changes the amount of confetti on each click.

> ⚠ Try not to put too high a number, or there will be more lag with the confetti appearing and dispersing. 100-200 is a good range.

1. `confetti_spread` changes the angle of which the confetti disperses. All numbers are in degrees. A value of `360` causes the confetti to disperse in all directions. A value of `1` causes the confetti to disperse and fall in a straight line.
2. `allowed_in` sets where the confetti can be used in. Enter the category slug(s) into this field. For multiple categories, separate the slugs with a `|` (no spaces).  
Leaving this field blank enables confetti in all pages.

---

<div class="post-metadata">

### Author: ![putty](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/putty/32/370902_2.png) [@putty](https://meta.discourse.org/u/putty)
#### Post date: [October 16, 2024, 1:55pm UTC](https://meta.discourse.org/t/a-tc-of-fun-discourse-confetti-clicks/331148/2 "2024-10-16T13:55:40Z")

</div>

This is fun! Might I suggest adding limits to where this is enabled? It doesn’t seem practical when navigating a general space, but it could be fun on a celebratory page.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 16, 2024, 2:29pm UTC](https://meta.discourse.org/t/a-tc-of-fun-discourse-confetti-clicks/331148/3 "2024-10-16T14:29:42Z")

</div>

this needs to be tied to the automation for members’ birthdays 😃

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [October 16, 2024, 11:10pm UTC](https://meta.discourse.org/t/a-tc-of-fun-discourse-confetti-clicks/331148/4 "2024-10-16T23:10:03Z")

</div>

Would this be a forum page like `/leaderboard` or `/about`, or topics in a specific category?

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [October 18, 2024, 5:15am UTC](https://meta.discourse.org/t/a-tc-of-fun-discourse-confetti-clicks/331148/5 "2024-10-18T05:15:09Z")

</div>

UPDATE:  
There is a new setting, `allowed_in`, that allows the confetti to be showed only in specific categories. Enter the category slug. For multiple categories, separate them with a `|`.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [October 18, 2024, 10:31am UTC](https://meta.discourse.org/t/a-tc-of-fun-discourse-confetti-clicks/331148/6 "2024-10-18T10:31:49Z")

</div>

> [@NateDhaliwal](#):
>
> Don’t leave it blank, as there is a bug with it (for now). I’ll fix it soon.

This is now fixed! Leaving this field blank enables confetti in all pages.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [January 17, 2025, 11:02am UTC](https://meta.discourse.org/t/a-tc-of-fun-discourse-confetti-clicks/331148/8 "2025-01-17T11:02:08Z")

</div>

Update: the `allowed_in` category is now updated to use `category` as the `list_type` for the setting. This allows a better way to select categories.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [January 17, 2025, 11:34am UTC](https://meta.discourse.org/t/a-tc-of-fun-discourse-confetti-clicks/331148/9 "2025-01-17T11:34:16Z")

</div>

The theme creator preview link doesn’t do anything for me.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [January 17, 2025, 1:48pm UTC](https://meta.discourse.org/t/a-tc-of-fun-discourse-confetti-clicks/331148/10 "2025-01-17T13:48:31Z")

</div>

Whoops, my bad. The categories in the setting were `#school` and `#movies`. I’ve changed it to `#general`.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [August 31, 2025, 11:54am UTC](https://meta.discourse.org/t/a-tc-of-fun-discourse-confetti-clicks/331148/11 "2025-08-31T11:54:51Z")

</div>

This may be the most useless TC 😆

* * *

I’ll be modernising the script tag soon. Perhaps even with a setting to show on specific URL paths.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [August 31, 2025, 11:44pm UTC](https://meta.discourse.org/t/a-tc-of-fun-discourse-confetti-clicks/331148/12 "2025-08-31T23:44:32Z")

</div>

I’ve updated this component not use `<script type='text/discourse-plugin'>` anymore.

> [@putty](#):
>
> Might I suggest adding limits to where this is enabled? It doesn’t seem practical when navigating a general space, but it could be fun on a celebratory page.

I’ve also added a setting `allowed_in_urls` to enable the confetti on certain paths within the forum (URL arguments are stripped when checking).

For example, the settings I have on Theme Creator look like this:

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/b/1/ab1fbf34d1230c80a577651298e5ec466d267524.png)

This means that confetti is enabled on:

- All topics in the #General category
- The [This is a new topic with 0 replies - discourse - Theme Creator](https://discourse.theme-creator.io/t/this-is-a-new-topic-with-0-replies/1872) topic
- The homepage
- The ‘Top’ page
