Current live VS Code Insiders is the audit baseline. Source and component fixtures are supporting evidence when they match the product. Workflow and cross-surface transitions are out of scope.
Session title shimmer
An unselected in-progress session animates its full title while a PixelSpinner already communicates activity.
Component being audited
Title shimmer with PixelSpinner
vscode3
Fix authentication redirect loopvscode · 12 mins ago
Investigate flaky smoke testRunning the smoke tests
Refresh the getting started guidevscode-docs · 1 hr ago
Production case
Multiple status motions at the same time
Several session rows show different animated statuses at the same time. Individually subtle signals combine into a broad, continuously moving field.
Observed behavior: The shimmer repeats the same in-progress message already carried by the PixelSpinner.
Potential impact: Because the full title moves, it has a much larger visual footprint than the icon; several running sessions may create broad simultaneous motion in the sidebar without adding new status information.
Chat progress text shimmer
The active progress message uses a continuous two-second sweep as its in-progress affordance.
Component being audited
Progress message in a chat response
Investigate the flaky smoke test and isolate the failure.
Agent
Creating isolated worktree (42%)
Production case
Chat progress alongside other session motion
The production recording shows chat progress text moving alongside other active status signals in the Agents Window.
Observed behavior: The moving gradient travels across the full status sentence. In the Agents Window, it can run alongside session PixelSpinners and an unselected session title shimmer.
Potential impact: A small progress update may occupy a broad visual area. The continuous loops represent different tasks but may compete at a similar attention level, making it less clear which progress signal should lead.
ChatWorkingLogo
The Insiders logo draws repeatedly beside the active response status while the agent is working.
Component being audited
Live response working indicator
Captured directly from VS Code Insiders 1.142.0 during an active response.
Production case
Working logo within the complete Agents Window
The production recording shows the working logo alongside progress text and other active status signals during the same request.
Observed behavior: The logo draw, progress-text shimmer, session PixelSpinner, and input-border loop can all communicate the same request state at once.
Potential impact: The separate loops may flatten the hierarchy instead of letting one primary progress signal lead.
Local tool PixelSpinner
A six-dot PixelSpinner appears beside a terminal command for the duration of the running tool.
Component being audited
Running terminal command indicator
Captured directly from VS Code Insiders while a local terminal command was running.
Production case
Tool progress within a complete request
A live request showing the local tool PixelSpinner alongside other ongoing-work motion signals.
Observed behavior: During a running terminal tool, the local PixelSpinner appears alongside the response-level working logo, progress-text shimmer, input working border, and session PixelSpinner.
Potential impact: Ongoing work can show several motion signals at the same time, increasing the overall visual activity even when each signal is locally appropriate.
Input working border
A continuous 2.5-second color sweep travels around the composer while a request is active.
Component being audited
Active chat composer border
Captured directly from the live composer while the request was running.
Production case
Composer motion beneath active response motion
The production recording shows the working border occupying the full width of the composer while progress motion is already present above it.
Observed behavior: The border loops around the full composer while logo and progress-text motion are visible above it.
Potential impact: A background operation may gain a large, persistent visual footprint around the primary input, causing the composer to compete for attention even when no input action is required.
Key findings
The audit shows a system-wide problem, not a few isolated animations: the same status can trigger different motion in different places, and several signals can compete for attention at once.
Current findings from the motion audit
What we found
Why it matters
Examples
What to check next
Coordination
Timelines distinguish production captures from source- or fixture-confirmed behavior. Counts are profile-specific, unrecorded combinations remain marked for production verification, and sequences not defined by the product are called out explicitly.
Production confirmedSource or fixture confirmed
Principles
Selected Fluent and Windows principles that could help shape motion in VS Code.
Useful motion
Purpose first
Use motion to explain a change, guide the next step, or confirm an outcome.
Reflect state
Start and stop with the real operation. Never imply unverified progress.
Lead signal
Choose the indicator closest to the work and suppress repeated status motion.
Preserve meaning
Keep every state clear through text, icons, and accessible feedback.
Shared patterns
Use the same motion for equivalent states across VS Code.
User control
Let new input interrupt, skip, or reverse motion immediately.
Natural timing
Match duration and easing to the element’s size and travel distance.
Preserve context
Connect before and after states so people can follow what changed.
Show hierarchy
Distinguish top-level, deeper, and sibling navigation through movement.
Intentional delight
Immediate results
Let delight accompany success without blocking the outcome or next action.
Focused delight
Animate only the element tied to the moment, not the surrounding UI.
Meaningful moments
Celebrate significant achievements or transformations—not routine actions.
Product character
Use signature motion, like VS Code Pet, to express personality and mark completion.
These principles provide a framework for addressing the issues documented in Findings.
Next steps
Move from audit findings to tested, shared guidance for motion in VS Code.
Propose potential solutionsCreate a few ways to reduce repeated motion and make progress easier to understand.
Test the solutionsTry them in representative components and Coordination scenarios, including Reduced Motion.
Review with the teamShare the prototypes and test results with design, engineering, accessibility, and product partners. Agree which direction should become a shared pattern.
Document VS Code motion principlesTurn the approved direction into clear principles, implementation guidance, examples, and Reduced Motion requirements.
