From pixels to characters: The engineering behind GitHub Copilot CLI’s animated ASCII banner

Key Actionable Insights

1

Use semantic color roles instead of hardcoded color values when building terminal UIs. Map high-level concepts like 'border', 'highlight', and 'text' to ANSI color codes, then create separate theme mappings for light and dark terminals. This approach ensures your CLI visuals degrade gracefully when users override terminal colors for accessibility.

The Copilot CLI team found that ANSI color consistency simply doesn't exist across terminals. Even in 256-color mode, terminals remap colors based on user themes, accessibility settings, and OS-level overrides.

2

Treat CLI animations as non-blocking, best-effort enhancements rather than required UI elements. Gate animations behind opt-in flags and automatically skip them in screen-reader mode. This prevents decorative content from degrading the developer experience for users with assistive technologies.

Rapid re-renders create auditory clutter for screen readers, and color-based meaning may not be perceivable by low-vision or color-blind users. The Copilot CLI animation is hidden by default and only shown when explicitly enabled.

3

When building frame-based terminal animations, separate frame content (plain text) from styling information (color mappings) and timing data. Store colors as coordinate-to-role mappings rather than embedding ANSI codes directly in the frame text. This separation makes animations maintainable and allows theme changes without touching frame data.

The Copilot CLI banner's 20 frames covering an 11x78 area with ~10 animation elements per frame would be unmaintainable if colors were embedded directly. The typed AnimationFrame interface with separate content, colors, and duration fields enabled the team to iterate on themes independently.

4

Prefer 4-bit ANSI color palettes over 8-bit or truecolor for maximum terminal compatibility and user customizability. While this limits brand palette accuracy, 4-bit colors are one of the few color modes most terminals allow users to customize, which is critical for accessibility.

Even modern terminals that support truecolor render colors differently based on themes. The WCAG contrast guidance applies differently to text vs. non-text graphical content in terminals, and the Copilot wordmark had to be treated as non-text content.

5

When rendering colored text in Ink components, group consecutive characters with the same color into segments before rendering. This reduces the number of Text component nodes and ANSI escape code sequences, improving rendering performance and reducing flicker in terminals that struggle with rapid updates.

The final rendering code maps each character to its color, then groups consecutive same-colored characters into segments, wrapping each segment in a single Ink Text component rather than creating one per character.

6

Build custom design tooling when no existing workflow supports your medium. For terminal animations, existing ANSI preview tools don't simulate how different terminals remap colors or handle cursor updates, making accurate design iteration impossible without purpose-built tooling that bridges design and engineering.

Cameron Foxly built a custom ASCII animation editor in about an hour using GitHub Copilot because there were virtually no tools for frame-by-frame ASCII editing with multi-color ANSI previews and Ink-ready component export. This tool later became the open-source ASCII Motion project.