Cli: ASCII art for init command

Created on 24 Mar 2019  路  12Comments  路  Source: react-native-community/cli

Lets make the init command looking really awesome with some nice ascii art! I have spend some time trying to give the init command a cleaner look and posted a screenshot and video of the result here https://github.com/react-native-community/react-native-cli/issues/91#issuecomment-475914736.

Based on @thymikee comment I have tried some different variations and sizes. I would love to discuss those.

There are different terminals, platforms and configurations out there. We should make sure that the ASCII image is recognizable a cross different platforms. We could learn from the yeoman implementation: https://github.com/yeoman/yosay

Original:

https://sendvid.com/embed/a9lrtvjj

54873024-0f7d9180-4dce-11e9-8eb0-ffe3cab33dc1

Variant 2

variant 2

Variant 3

variant 3

Variant 4

variant 5

Variant 5

variant 5

Variant 6

variant 6

Variant 7

variant 7

Variant 8

variant 8

Variant 9

variant-9

Although I tried to include multiple sizes, small that variant will render the logo unrecognizable. Variant 8 is the smallest I could get, but I can spend some time trying to create a smaller version.

What do you think? Please be critical!

init discussion

All 12 comments

I think I like the Variant 5 & 6 the most :) Awesome work!

Variant 6

Why don't we ship both and make a secret flag? Just kidding.

This is amazing work, I am so excited to see this finally implemented, great job! I am also voting for 5/6.

My vote goes to variant 3.

This is super cool! I would suggest 4, 7 or 8 because they take up less vertical space.

Variant 2

5

Awesome, thanks for the responses! Added variant 9, basically the same 5 but more smooth.

This is amazing. Number 5 the best C:

Great work! 5 get's my vote!

Very cool!! #6

Does it animate?

@dirkpostma I tried some simple animations but could not do it in a reliable way, it has a lot of limitations. Terminal support is a problem as well. Did also some tests animating colors with chalk-animation see https://sendvid.com/ezmgdcqt but I am not sure it would add enough value.

Was this page helpful?
0 / 5 - 0 ratings