When the CLI team asked for a ASCII banner, I knew I wanted it to be animated and utilize some color, but had zero experience with ASCII art. I thought, "it's just text, how hard can it be???"

I quickly realized that there really aren't great off the shelf tools for making this sort of thing. Lots of clunky half-baked tools for static images, or fancy shader effects for animation with no manual frame-by-frame editing.

And I learned from the engineers that it would need to be utilizing the 4-bit ANSI escape code colors to be universally supported and be accessible. These are rendered differently in every terminal, because of course! This was going to be trickier than I thought! 😬

The best tool I could find was http://asciiart.eu's ASCII Draw Studio, that let me "draw" on a canvas in one color with no animation, and export out .txt files. Not exactly what I needed, but close enough to get started.

Then, with my trusty Copilot agent mode in VSCode, I vibe-coded myself a simple web tool to do what I wanted to do: ingest .txt files as frames on a js canvas, set the duration of frames and test playback, and add and preview different terminal's default ANSI colors.

In the past, I would have just made some After Effects mock of what I wanted and handed it off to the engineers and say "good luck!" But, in the era of the Vibe-coding Brand Designer, I was able to give them close to shippable code right off the bat...

Because I was able to show copilot the tech stack for building the Copilot CLI (React for the CLI with INK, using Typescript), and tell it to create an export feature for my app that would save a self contained .tsx file with the character and color data to slip into the CLI.

I handed that file off to the aggressively helpful Andy Feller on the CLI eng team, and he was able to shoehorn that in to the product with some expert refactoring making sure that the colors worked with the CLI's color theme management across color modes. Light mode FTW!

But, I couldn't stop there! Now that I had a taste of the ASCII bug, I knew that I needed to make a better tool for making ASCII animation. So, I spent a handful of nights with Copilot spinning up an MVP of my very first app: http://www.ascii-motion.app (desktop only for now)

And with this tool that I just willed into existence in under a week of post-kids-bedtime copilot sessions, I was immediately able to make the teaser animation for the CLI that GitHub posted a few days before the launch to help build some hype.

This is such an exciting time to be a technically-minded designer! Code was always a barrier for me getting my work into digital spaces, but now I can prototype things like one of those fancy "creative technologists" I always considered magicians!

And if you've made it this far, please go try Ascii Motion and tell me what you think! Lots of bugs to chase and features to add, but it would make my day if someone opened an issue in the repo of my very first app to complain about how they hate it ❤️: https://github.com/CameronFoxl...

Pro tip: If you’re using GitHub Copilot CLI and want to see the welcome banner on every load, change the “banner” property at ~/.copilot/config.json to “always” 🤓

@CameronFoxly nice animation man! I made sure to set my banner config to "always" :)

@wtergan Pro move!

@CameronFoxly that looked awesome but after restarting I couldn't see it again :(

@GregKonush We decided to only play it on first launch so we dont annoy standard CLI users who use the CLI to declutter and streamline. You can have it play everytime by opening ~/.copilot/config.json and changing the banner property to "always"

@CameronFoxly me switching from claude code to github copilot because of the ASCII art welcome banner

@mikelong107 ❤️ Pro tip: Open ~/.copilot/config.json and change the banner property to "banner": "always" and you'll see it on every load :)

@CameronFoxly animation style is great, and really enjoying playing around with ASCII Motion

@rywigs Thanks! Please share if you make something cool in there. And I'd love to hear about any bugs or UI patterns that pissed you off. It's my first time making something for other people, and I'm thirsty for feedback! ❤️

@CameronFoxly If you can’t draw(me!), can you import an image to convert to ASCII and animate?

@_xjuanma Yes! You can import stills or video from the "Import" menu in the header. There's lots of settings for how to interpret the image into ascii and it will turn videos into animated ascii! (long videos start to slow down though, still need to do some performance improvements there)

@CameronFoxly How do I get the preveiew again?

@hussein_kizz https://github.com/github/copi...

@CameronFoxly I think it’s GitHub with a capital H… I know some people over there, so you know. No big deal

@samoshin 💀🤦‍♂️

@CameronFoxly This could have been you @d4m1n but you decided to make money instead

@CameronFoxly really beautiful transition of the github logo

@CameronFoxly Awesome work! I tried to do this 25 years ago and realized I didn’t have the patience or skill make it worthy. Good to see there’s some tools!

@CameronFoxly This is so cool. I have a weak spot for ASCII art. 😎 Thanks for both writing this down as well as creating this tool!