Better animation (particles!) for random project-name generation

[joshwcomeau]

When creating a new project, there's a "sparkles" button that will generate a new, random project name:

I don't love what I did here, for a few reasons:

• The button outline logic is totally different from anywhere else in the application. It shows on hover instead of on toggle.
• The outline doesn't look good around the icon.
• It isn't whimsical enough.

I have a way more fun idea: particle generation!

When you click on the sparkles, it should emit a handful of particles in random directions. This is how Medium's "Clap" icon works:

I don't really like the Medium particles, because they feel really dull and lifeless. This example has way more fun particles (albeit far too many for what I want here):

With these examples in mind, what I'm imagining is:

• 5-10 particles emitted on click
• Colors selected randomly from a handful of good values (take some from our COLORS constant in constants.js)
• Maybe gravity would be fun to add, so they fall down after exploding out in random directions?
• Shrink and/or fade as they fall
• Overall pretty quick / subtle
• The icon can maybe pulse on click as well

The component we'd be changing is HoverableIconButton in ProjectName.js. In fact we could delete HoverableIconButton and replace it with a new ParticleButton, maybe?

Probably the first step is to create a storybook (or docz, if we've migrated) and figure out what the props should be. It would be good to control things like density, duration, gravity, etc.

There are libraries that can help, but I think it's probably best to do this manually, so we have 100% control over it. Although I'm happy to be proven wrong, if folks wanna show me what's possible with particle libraries :D

This is a really fun issue and I may tackle it myself if/when I find the time. But it's also a great first issue for newcomers. Just please be aware that I might request quite a few changes, since I have something pretty specific in mind.

[j-f1]

How about using an animation similar to the activate-power-mode animation and animate typing out the new project name?

[j-f1]

There are Vanillia JS and React implementations of that animation, although we might want to disable the screen shake.

[joshwcomeau]

How about using an animation similar to the activate-power-mode animation and animate typing out the new project name?

Hm, so my personal opinion is that I'm more-or-less happy with the actual letter-shuffling animation; it's nice and quick (and gets progressively quicker) and isn't too distracting.

That said, I like the particle effects themselves in activate-power-mode! I could see using it as inspiration. I'd just want it to be less blurry and more colourful, but the physics are nice

[AWolf81]

@joshwcomeau I created this codesandbox here.
It's a particle effect created with vanilla js inside a SVG with circles. I'm just using react-cursor-position to get the mouse position.
It's pretty basic & some of your mentioned effects are not added yet. I'd like to add shrink or fade but it wasn't looking good.
Colors are from Guppy color constant and can be modified by changing usedColors array.
Do you have an idea how to add gravity or shrinking to that sandbox?

Performance is OK in Chrome. In Firefox it's a bit slow. No performance monitioring done yet.

Here are some nice particle effects as inspiration.
I like this one but I think disapearing is not working for our use-case and I also think that there a too many particles.

[crowtech7]

Is this issue still open? Are you still wanting to change the particle thing? I'm wanting to contribute to an open-source project (my first time) for Hacktoberfest and looking around. Let me know if this is still open!