Use confetti in tiddlywiki

Tips & Tricks
#1

image
image2239×1266 200 KB

DEMO: TiddlyWiki5 — A modern style and elegant notebook built with Tiddlywiki5 and Tailwindcss

#2

@oeyoews your experiments look like fun, and new ways to add interface elements. Perhaps you could put just a little documentation in please.

#3

looks pretty slick… @oeyoews

#4

I like it a lot ! I made it into a button, to be able to trigger the effect whenever I want :

party time button.json (8.2 KB)

Demo: https://demos.tiddlyhost.com/#/party

2 Likes
#5

more examples:

(add zIndex)

image
image2240×1266 271 KB

image
image828×1792 143 KB

JS Confetti

https://agezao.github.io/confetti-js/

https://agezao.github.io/confetti-js/examples/

1 Like
#6

Great. I’ve its use case.

  1. I’m working on an exercises wiki for students

  2. Every exercise tiddler has a button, “Mark as Completed”

  3. When the user presses the button, I can show the confetti :confetti_ball:

2 Likes
#7

If this plugin is written as a module, it may be more convenient and concise to use

2 Likes
#8

Now it is very convenient to use because it provides an object named Confetti . For example, Confetti.fireworks() can trigger fireworks effect. It also provides a confetti widget

confetti demo

image
image1528×698 70.2 KB

image
image1302×376 55.5 KB

3 Likes
#9

Hi @oeyoews apologies I had missed this thread. I have also been working on a branch integrating the same confetti library into TW. It’s part of a new interactive tour that is intended to take users through the basics of using TiddlyWiki:

I will create a PR for the branch soon, and then perhaps we might look at incorporating some of the features of your implementation.

2 Likes
#10

I mainly use third-party confetti libraries, so may not be very suitable

#11

I think I’m using the same library as you are – https://www.kirilv.com/canvas-confetti/

#12

I’m getting a “page not found” error for TiddlyWiki5 — A modern style and elegant notebook built with Tiddlywiki5 and Tailwindcss which is https://neotw.oeyoewl.top/#%24%3A%2Fplugins%2Foeyoews%2Fneotw-confetti

#13

Can’t be found in the wiki, I think it’s being removed

#14

image
image2239×1329 289 KB

I am refactoring confetti plugin, you can enter $tw.Confetti.pretty() in the console to see the effect.

https://tiddlywiki-starter-kit.vercel.app/#%24%3A%2Fplugins%2Foeyoews%2Fconfetti

#15

image
image2228×1255 87.3 KB

use confetti-js as tiddlywiki background

1 Like
#16

hi, i have installed confetti-background plugin, but i want to know how to enable it :frowning: some idea or documentation to follow?
Thanks you for all your work in tiddlywiki plugins!

#17

Feel free to check it out at this demo:

edit to see how the confetti works when you get a match.

Quick add:

The key bit is an action like this:

<$button>
 <$action-sendmessage $message="tm-confetti-launch"/>
Show confetti
</$button>

Check whether that works, on your wiki. Then customize…

1 Like
#18

thanks you, i would like to know how to launch confetti as tiddlywiki background like in “Tiddlywiki starter kit”?

#19

Some styles depend on tailwindcss. You need to install the tailwindcss plugin or modify the plugin style.