Use confetti in tiddlywiki

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

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

looks pretty slick… @oeyoews

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

more examples:

(add zIndex)

JS Confetti

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

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

1 Like

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

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

2 Likes

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

3 Likes

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

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

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

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

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


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

use confetti-js as tiddlywiki background

1 Like