cameronfoxly.bsky.social

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 🧵...

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!

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 🧵...

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)

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 🧵...

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.

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 🧵...

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.

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 🧵...

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.

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 🧵...

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…

This Director/Actor setup allows for a separation of concerns, making it easy to extend and add new animations, while also allowing us to maintain full control of timings and transitions, creating an interactive Copilot experience - fun to watch and easy to maintain!

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…

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.

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…

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!

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…

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: