Back office ops · Production

GitHub engineers accessible ASCII animation for Copilot CLI using GitHub Copilot for code scaffolding

The problem

The GitHub Copilot CLI team needed an animated ASCII banner but found no existing tools that could handle terminal animation with proper ANSI color support, cross-terminal compatibility, and accessibility constraints — making design iteration almost impossible.

First attempt

Manual frame creation was abandoned as a 'nightmare', Ink's React renderer was insufficient for animation requiring handcrafted logic, and existing ANSI preview tools could not simulate cross-terminal color remapping.

Workflow diagram · grounded in source
1
Banner request received
trigger
“when the GitHub Copilot CLI team asked for a small entrance banner for the new command-line experience”
2
Copilot scaffolds animation MVP
ai_action
“began asking GitHub Copilot for help scaffolding an animation MVP that could: Within an hour, he had a working prototype that was monochrome, but functional”
3
Copilot scaffolds palette UI
ai_action
“He took a screenshot of the Wikipedia ANSI table, handed it to Copilot, and asked it to scaffold a palette UI for his tool”
4
Copilot generates Ink component
ai_action
“"Copilot filled in syntax I didn't know," Cameron said. "But I still made all the architectural decisions."”
5
Cameron opens first pull request
output
“This gave Cameron the confidence to open a pull request (his first engineering pull request in nine years at GitHub)”
6
Andy refactors prototype for production
human_review
“Andy Feller (@andyfeller), a long-time GitHub engineer behind the GitHub CLI, partnered with Cameron to bring the animation into the Copilot CLI codebase”
7
Semantic ANSI color roles rendered
output
“the animation maps semantic roles—such as borders, eyes, highlights, and text—to ANSI color slots that terminals can reinterpret safely”
Reported outcome

GitHub Copilot enabled Cameron, a brand designer, to prototype the tool and open-source it as ascii-motion.app; the production Copilot CLI animation required over 6,000 lines of TypeScript and the team can now ship new animations without rebuilding the system.

Reported metrics
TypeScript codebase size for animationover 6,000 lines of TypeScript
Animation durationthree seconds
prototype development time with Copilotwithin an hour
Reported stack
GitHub CopilotInkTypeScriptReactVS Code
Source
https://github.blog/engineering/from-pixels-to-characters-the-engineering-behind-github-copilot-clis-animated-ascii-banner/
Read source ↗

Frequently asked questions

What did this team achieve with this AI workflow?

GitHub Copilot enabled Cameron, a brand designer, to prototype the tool and open-source it as ascii-motion.app; the production Copilot CLI animation required over 6,000 lines of TypeScript and the team can now ship ne…

What tools did this team use?

GitHub Copilot, Ink, TypeScript, React, VS Code.

What results were reported?

TypeScript codebase size for animation: over 6,000 lines of TypeScript; Animation duration: three seconds; prototype development time with Copilot: within an hour (source-reported, not independently verified).

What failed first in this deployment?

Manual frame creation was abandoned as a 'nightmare', Ink's React renderer was insufficient for animation requiring handcrafted logic, and existing ANSI preview tools could not simulate cross-terminal color remapping.

How is this back office ops AI workflow structured?

Banner request received → Copilot scaffolds animation MVP → Copilot scaffolds palette UI → Copilot generates Ink component → Cameron opens first pull request → Andy refactors prototype for production → Semantic ANSI color roles rendered.

Related back office ops cases