@cameronfoxly.bsky.social
You can't just drop "turn of the century" on an old man like that!
I went on a lot of "ancient" tangents trying to find a tool that could help me, and durdraw.org , based on Aciddraw almost did the trick, but was just too buggy. But that site 👆reminds me how much I miss the old internet:)
I went on a lot of "ancient" tangents trying to find a tool that could help me, and durdraw.org , based on Aciddraw almost did the trick, but was just too buggy. But that site 👆reminds me how much I miss the old internet:)
September 26, 2025 at 2:38 AM
You can't just drop "turn of the century" on an old man like that!
I went on a lot of "ancient" tangents trying to find a tool that could help me, and durdraw.org , based on Aciddraw almost did the trick, but was just too buggy. But that site 👆reminds me how much I miss the old internet:)
I went on a lot of "ancient" tangents trying to find a tool that could help me, and durdraw.org , based on Aciddraw almost did the trick, but was just too buggy. But that site 👆reminds me how much I miss the old internet:)
Thank you, Katie! It would warm my heart if you made some ascii art with my tool! ❤️
September 26, 2025 at 12:07 AM
Thank you, Katie! It would warm my heart if you made some ascii art with my tool! ❤️
Thanks for reading! And if you've made it this far, please go try Ascii Motion and tell me what you think! 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 ❤️: github.com/CameronFoxly...
GitHub - CameronFoxly/Ascii-Motion: A modern web application for creating and animating ASCII art
A modern web application for creating and animating ASCII art - CameronFoxly/Ascii-Motion
github.com
September 25, 2025 at 11:35 PM
Thanks for reading! And if you've made it this far, please go try Ascii Motion and tell me what you think! 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 ❤️: github.com/CameronFoxly...
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!
September 25, 2025 at 11:35 PM
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 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.
September 25, 2025 at 11:35 PM
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)
September 25, 2025 at 11:35 PM
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!
September 25, 2025 at 11:35 PM
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.
September 25, 2025 at 11:35 PM
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.
September 25, 2025 at 11:35 PM
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.
September 25, 2025 at 11:35 PM
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! 😬
September 25, 2025 at 11:35 PM
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! 😬
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.
September 25, 2025 at 11:35 PM
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.
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???"
bender from futurama is asking how hard it can be
ALT: bender from futurama is asking how hard it can be
media.tenor.com
September 25, 2025 at 11:35 PM
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???"
Really depends on how complex the svg is. They’re within the same order of magnitude in this specific case, but svgs have the advantage of being able to be styled inline and crisp at any context or screen resolution. But a complex svg would get too big quick, and I’d fall back to video
February 14, 2025 at 12:37 AM
Really depends on how complex the svg is. They’re within the same order of magnitude in this specific case, but svgs have the advantage of being able to be styled inline and crisp at any context or screen resolution. But a complex svg would get too big quick, and I’d fall back to video
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!
February 11, 2025 at 4:56 PM
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!
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!
February 11, 2025 at 4:55 PM
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!
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
February 11, 2025 at 4:55 PM
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.
February 11, 2025 at 4:54 PM
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.
Playback is then controlled with javascript via 2 state machines. The first controls which animation to play and when. You can think of this as this state machine as the ‘Director’.
The second controls how the animation is played. You can think of this piece as the ‘Actor’
The second controls how the animation is played. You can think of this piece as the ‘Actor’
February 11, 2025 at 4:53 PM
Playback is then controlled with javascript via 2 state machines. The first controls which animation to play and when. You can think of this as this state machine as the ‘Director’.
The second controls how the animation is played. You can think of this piece as the ‘Actor’
The second controls how the animation is played. You can think of this piece as the ‘Actor’
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!
February 11, 2025 at 4:53 PM
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.
February 11, 2025 at 4:53 PM
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:
February 11, 2025 at 4:52 PM
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: