Birthday confetti on ambassador card

[jontok]

Resolves #72

Added a confetti effect via the react-particles package and tsparticles.

Effect was tested on desktop (Firefox, Chromium) and with a running stream.
The confetti.json URL can be changed to either a static config.json file or to a different particle config URL.

[pjeweb]

Thats looking quite nice. Thanks for working on this.

alveus-confetti.mov

Some pointers:

• You'll have to check in the package-lock.json to make the tests succeed
• We would definitely want the config to be static!
• The confetti can be more colorful and bigger imho. Maybe we can make it look similar to the !party animation?!
• Can you compare the bundle js size with and w/o the confetti effect?
• Maybe we can limit the confetti to a smaller portion of the view? Its quite big.
• Confetti should probably stop after a few seconds. (it can be re-enabled when you click on the card again)
• There seems to be a weird scaling effect while the card animates into view with the confetti. Maybe you can delay the confetti being drawn until after the card is fully shown.

Also I think we might need some sort of explanation for the confetti. We would probably need to add sth like "It's x birthday today" to the card or add the birthday hat to the card.

[MattIPv4]

We would probably need to add sth like "It's x birthday today" to the card or add the birthday hat to the card.

There should be a party hat that shows on the card too? That's been a feature for quite a while.

[pjeweb]

We would probably need to add sth like "It's x birthday today" to the card or add the birthday hat to the card.

There should be a party hat that shows on the card too? That's been a feature for quite a while.

Ooh yeah forgot about that.

[jontok]

Yeah this was a spontaneous PR, i will resolve the existing issues

The confetti can be more colorful and bigger imho. Maybe we can make it look similar to the !party animation?!

No problem I can play around with those parameters post some examples.

We would definitely want the config to be static!

I will also change the config to a static json file. Should I add this config to the data repo?

I will also put all the other Items you named on list.

• You'll have to check in the package-lock.json to make the tests succeed
• We would definitely want the config to be static!
• The confetti can be more colorful and bigger imho. Maybe we can make it look similar to the !party animation?!
• Can you compare the bundle js size with and w/o the confetti effect?
• Maybe we can limit the confetti to a smaller portion of the view? Its quite big.
• Confetti should probably stop after a few seconds. (it can be re-enabled when you click on the card again)
• There seems to be a weird scaling effect while the card animates into view with the confetti. Maybe you can delay the confetti being drawn until after the card is fully shown.

Idea: See something like a party mode done with this

[MattIPv4]

Should I add this config to the data repo?

The data repo is generally for shared data between the site and the extension. I think it'd be best to keep it in this repo. I notice it takes a URL currently, but I wonder if there's a way to just pass an object directly in for the config? A file feels like an unnecessary extra step?

[jontok]

I wonder if there's a way to just pass an object directly in for the config?

Yes that is possible, the Partical component has a prop "options" which takes a json object.
The object can be loaded from a file in the repo.

[jontok]

Here the approximate main.bundle.js file size.
This is not the final size because I'm still working on the scaling issue.
Clean from main:

With tsparticles:

[MattIPv4]

👋 Hey @jontok, just wanted to check in here to see how things were going, and if you need any help from us to get this across the line?

[jontok]

just wanted to check in here to see how things were going, and if you need any help from us to get this across the line?

Hey @MattIPv4 , thanks for asking.

1. I cannot figure out how to resolve the scaling issue at the start of the animation.
2. There is also still a problem with positioning.
   • Since cards on mobile and Panel View are centered but cards in the video overlay are not.
   • if the panel type (mobile, panel, video overlay) can be passed through to the Card Component we could change the positioning on the fly

[MattIPv4]

I cannot figure out how to resolve the scaling issue at the start of the animation.

This feels like it's because the particle emission starts before its figured out the size of the container -- can we delay the particles for a few milliseconds to give it time to figure things out?

There is also still a problem with positioning.

It seems like the particles always fill the screen -- I'm not sure this is how I'd expect it to happen. Can we not have them always emit from the card itself, so they are always positioned relative to the card?

For example, center the emitter at the center of the card, and then put it behind the card maybe?

[jontok]

can we delay the particles for a few milliseconds to give it time to figure things out?

I have now played around with the delay. If the card is already rendered the particles don't have the scaling issue. But changing the delay does not change anything.

Can we not have them always emit from the card itself, so they are always positioned relative to the card?

No the emitters always have an absolute position. We can change the size and position of the canvas but then the particles are only on a small part off the screen and will not overflow the parent element.

[MattIPv4]

No the emitters always have an absolute position. We can change the size and position of the canvas but then the particles are only on a small part off the screen and will not overflow the parent element.

Right, that works with what I am saying -- have the canvas still be the full size of the screen, that's fine, but compute the emitter position based on the card, so that the particles are emitted from the center of the card. And, we can position the canvas behind the card, so that the particles appear to be coming out of the card.

I have now played around with the delay. If the card is already rendered the particles don't have the scaling issue. But changing the delay does not change anything.

Perhaps at the same time as computing the position of the emitter, we can also compute the width/height of the canvas and set that on the particles component, so it doesn't have to compute that itself, which might be the source of the scaling issue?

[MattIPv4]

I'm going to close this out as there hasn't been any movement in quite a while and there are some conflicts. Feel free to re-open or create a new PR if you intend to continue working on this!