{"action":"created","issue":{"url":"https://api.github.com/repos/joshwcomeau/guppy/issues/264","repository_url":"https://api.github.com/repos/joshwcomeau/guppy","labels_url":"https://api.github.com/repos/joshwcomeau/guppy/issues/264/labels{/name}","comments_url":"https://api.github.com/repos/joshwcomeau/guppy/issues/264/comments","events_url":"https://api.github.com/repos/joshwcomeau/guppy/issues/264/events","html_url":"https://github.com/joshwcomeau/guppy/issues/264","id":363973119,"node_id":"MDU6SXNzdWUzNjM5NzMxMTk=","number":264,"title":"Better animation (particles!) for random project-name generation","user":{"login":"joshwcomeau","id":6692932,"node_id":"MDQ6VXNlcjY2OTI5MzI=","avatar_url":"https://avatars0.githubusercontent.com/u/6692932?v=4","gravatar_id":"","url":"https://api.github.com/users/joshwcomeau","html_url":"https://github.com/joshwcomeau","followers_url":"https://api.github.com/users/joshwcomeau/followers","following_url":"https://api.github.com/users/joshwcomeau/following{/other_user}","gists_url":"https://api.github.com/users/joshwcomeau/gists{/gist_id}","starred_url":"https://api.github.com/users/joshwcomeau/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/joshwcomeau/subscriptions","organizations_url":"https://api.github.com/users/joshwcomeau/orgs","repos_url":"https://api.github.com/users/joshwcomeau/repos","events_url":"https://api.github.com/users/joshwcomeau/events{/privacy}","received_events_url":"https://api.github.com/users/joshwcomeau/received_events","type":"User","site_admin":false},"labels":[{"id":939204844,"node_id":"MDU6TGFiZWw5MzkyMDQ4NDQ=","url":"https://api.github.com/repos/joshwcomeau/guppy/labels/good%20first%20issue","name":"good first issue","color":"57ff5f","default":true},{"id":989506125,"node_id":"MDU6TGFiZWw5ODk1MDYxMjU=","url":"https://api.github.com/repos/joshwcomeau/guppy/labels/involves%20design","name":"involves design","color":"7e00ff","default":false},{"id":939204842,"node_id":"MDU6TGFiZWw5MzkyMDQ4NDI=","url":"https://api.github.com/repos/joshwcomeau/guppy/labels/upcoming%20feature","name":"upcoming feature","color":"a2eeef","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-09-26T11:03:28Z","updated_at":"2018-09-26T16:46:53Z","closed_at":null,"author_association":"OWNER","body":"When creating a new project, there's a \"sparkles\" button that will generate a new, random project name:\r\n\r\n![random-name](https://user-images.githubusercontent.com/6692932/46075537-c1f2d580-c158-11e8-8fa6-4ba374a793e0.gif)\r\n\r\nI don't love what I did here, for a few reasons:\r\n\r\n- The button outline logic is totally different from anywhere else in the application. It shows on hover instead of on toggle.\r\n- The outline doesn't look good around the icon.\r\n- It isn't whimsical enough.\r\n\r\nI have a way more fun idea: particle generation!\r\n\r\nWhen you click on the sparkles, it should emit a handful of particles in random directions. This is how Medium's \"Clap\" icon works:\r\n\r\n![medium-clap](https://user-images.githubusercontent.com/6692932/46075717-50675700-c159-11e8-8c5b-f49dec770bbc.gif)\r\n\r\nI don't really like the Medium particles, because they feel really dull and lifeless. [This example](http://soulwire.github.io/sketch.js/examples/particles.html) has way more fun particles (albeit far too many for what I want here):\r\n\r\n![particles](https://user-images.githubusercontent.com/6692932/46075778-8dcbe480-c159-11e8-9c45-959c9cb51a7b.gif)\r\n\r\nWith these examples in mind, what I'm imagining is:\r\n\r\n- 5-10 particles emitted on click\r\n- Colors selected randomly from a handful of good values (take some from our COLORS constant in `constants.js`)\r\n- Maybe gravity would be fun to add, so they fall down after exploding out in random directions?\r\n- Shrink and/or fade as they fall\r\n- Overall pretty quick / subtle\r\n- The icon can maybe pulse on click as well\r\n\r\nThe component we'd be changing is `HoverableIconButton` in `ProjectName.js`. In fact we could delete `HoverableIconButton` and replace it with a new `ParticleButton`, maybe?\r\n\r\nProbably 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.\r\n\r\nThere 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\r\n\r\nThis 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."},"comment":{"url":"https://api.github.com/repos/joshwcomeau/guppy/issues/comments/424788668","html_url":"https://github.com/joshwcomeau/guppy/issues/264#issuecomment-424788668","issue_url":"https://api.github.com/repos/joshwcomeau/guppy/issues/264","id":424788668,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNDc4ODY2OA==","user":{"login":"j-f1","id":25517624,"node_id":"MDQ6VXNlcjI1NTE3NjI0","avatar_url":"https://avatars2.githubusercontent.com/u/25517624?v=4","gravatar_id":"","url":"https://api.github.com/users/j-f1","html_url":"https://github.com/j-f1","followers_url":"https://api.github.com/users/j-f1/followers","following_url":"https://api.github.com/users/j-f1/following{/other_user}","gists_url":"https://api.github.com/users/j-f1/gists{/gist_id}","starred_url":"https://api.github.com/users/j-f1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/j-f1/subscriptions","organizations_url":"https://api.github.com/users/j-f1/orgs","repos_url":"https://api.github.com/users/j-f1/repos","events_url":"https://api.github.com/users/j-f1/events{/privacy}","received_events_url":"https://api.github.com/users/j-f1/received_events","type":"User","site_admin":false},"created_at":"2018-09-26T16:46:53Z","updated_at":"2018-09-26T16:46:53Z","author_association":"COLLABORATOR","body":"How about using an animation similar to the [`activate-power-mode`](https://atom.io/packages/activate-power-mode) animation and animate typing out the new project name?"}}
{"actor":{"display_login":"j-f1"}}