Big day for ascii-motion.app! I finally got auth setup, so you can make an account and save ASCII art projects to the cloud. Lot's of new features to check out too! Want to warm my heart? Let me see your profile pop up on my database as a new user🙏❤️

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 for the CLI that GitHub posted a few days before the launch to help build some hype.

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: www.ascii-motion.app (desktop only for now)

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!

Because I was able to show copilot the tech stack for building the 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.

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, set the duration of frames and test playback, and add and preview different terminal's default ANSI colors.

The best tool I could find was 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.

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 public preview of Github Copilot CLI launched today, and if you install it, you'll be welcomed by little ASCII art welcome banner that I animated. Creating it ended up being great example of how vibe-coding has entered my toolbelt. Nerdy deets in 🧵...

S/O to @deanb.bsky.social for wrangling the code on this. The GitHub Copilot design engineering team is killing it with this kind of attention to delightful details. I’m super excited to see more polish like this as the product matures. Thanks for following along!

Once the Director knows which animation should be playing, it delegates the execution of this animation to the Actor. The Actor is a smaller and much more simple state machine that breaks each animation into 4 stages: 1) Idle, 2) Starting, 3) Running, 4) Ending

The Director calls the shots. It evaluates conditions like if there’s an error, if copilot is 'thinking' and even if there will be strong positive or negative sentiment in Copilots reply. The Director is driven by 3 main components: AnimationType, OnFinish, and loopAnimation.

Making them into SVG sprite sheets meant we could style them for color mode support and animate them entirely with pure CSS. Lightweight, flexible, universally supported, and fast!

But video files, gifs, or third-party js libraries are all too heavy and limiting for the product, so we took a page from old school game design and converted each animation into image sequences, autotraced them into SVGs in Illustrator, and laid them out into sprite sheets.

To make the animations themselves, I modeled a 3D version of the Copilot icon in Blender and animated them in After Effects, to build out a video library of potential responses:

If you’ve used GitHub Copilot chat on GitHub.com/copilot recently, you may have noticed some new life breathed into the Copilot chat avatar with interactive 3D character animations. Let's do a deep dive 🧵on how we hacked it together for the front end 🤓’s out there…