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

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.