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… - ThreadSky

If you’ve used GitHub Copilot chat on https://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…

Comments

eva.town•13 days ago

ohmygosh I LOVE. thank you for the behind the scenes!

alenanik.github.io•13 days ago

When I thought that the highest level of cuteness was archived 👏🏻 Love it!

cameronfoxly.bsky.social•13 days ago

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:

cameronfoxly.bsky.social•13 days ago

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.

phildenhoff.bsky.social•12 days ago

What’s the approximate size of the SVGs vs a gif or compressed video? Using sprites in hidden divs is a fascinating idea

cameronfoxly.bsky.social•11 days ago

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

cameronfoxly.bsky.social•13 days ago

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!

cameronfoxly.bsky.social•13 days ago

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’

cameronfoxly.bsky.social•13 days ago

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.

cameronfoxly.bsky.social•13 days ago

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

Comments

Posting Rules

Reply