TiddlyWiki5/plugins/tiddlywiki/confetti

title: $:/plugins/tiddlywiki/confetti/readme

! Introduction

This plugin adds a programmable confetti cannon to your TiddlyWiki. It is based on https://www.kirilv.com/canvas-confetti/ by Kiril Vatev.

! Usage

The confetti cannon is controlled using messages.

!! Message: tm-confetti-launch

The `tm-confetti-launch` message launches the confetti cannon. The following options are supported:

|!Name |!Description |!Default |
|''delay'' |Number of milliseconds to delay the launch |0 |
|''particleCount'' |The number of confetti to launch |50 |
|''angle'' |The angle in which to launch the confetti, in degrees (90 is straight up) |90 |
|''spread'' |How far off center the confetti can go, in degrees. 45 means the confetti will launch at the defined `angle` plus or minus 22.5 degrees |45 |
|''startVelocity'' |How fast the confetti will start going, in pixels |45 |
|''decay'' |How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed |0.9 |
|''gravity'' |How quickly the particles are pulled down. 1 is full gravity, 0.5 is half gravity, etc. |1 |
|''drift'' |How much to the side the confetti will drift. The default is 0, meaning that they will fall straight down. Use a negative number for left and positive number for right |0 |
|''ticks'' |How many times the confetti will move (this is an abstract quantity; the designed recommends playing with it if the confetti disappears too quickly for you) |200 |
|''originX'' |The `x` position on the page, with `0` being the left edge and `1` being the right edge |0.5 |
|''originY'' |The `y` position on the page, with `0` being the top edge and `1` being the bottom edge |0.5 |
|''colors'' |A space separated list of color strings in hex format (eg `#bada55` or `#ce5`) | |
|''shapes'' |A space separated list of shapes for the confetti. The possible values are `square`, `circle`, and `star`. The default is to use both squares and circles in an even mix. To use a single shape, you can provide just one shape in the list, such as `star`. You can also change the mix by providing a value such as `circle circle square` to use two third circles and one third squares | |
|''scalar'' |Scale factor for each confetti particle. Use decimals to make the confetti smaller |1 |
|''zIndex'' |Z-index of confetti. Increase the value if the confetti is appearing behind other on-screen elements|100 |
|''disableForReducedMotion'' |Set to `yes` to entirely disable confetti for users that [[prefer reduced motion|https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion]] |`no` |

<$button>
<$action-sendmessage $message="tm-confetti-launch"/>
<$action-sendmessage $message="tm-confetti-launch" originY=0.6 spread=70 delay=300/>
<$action-sendmessage $message="tm-confetti-launch" originY=0.55 spread=30 delay=600/>
Launch
</$button>

!! Message: tm-confetti-reset

The `tm-confetti-reset` message stops any active confetti.