MotionCode

MotionCode — Make your code editor feel alive.

A professional, modern, and lightweight Visual Studio Code extension designed to bring subtle, configurable visual animations, state feedback, and workspace polish to your IDE.

Table of Contents

• Overview
• Why Use MotionCode? (Developer Advantages)
• Complete Animation Guide
• Interactive Dashboard
• Workspace Presets
• Installation & Getting Started
• Commands Reference
• Configuration Settings
• Performance & Security Safeguards
• Accessibility
• Creator & Developer Credits
• License

Overview

MotionCode transforms the Visual Studio Code editing experience by replacing static UI transitions with subtle, elegant, event-driven visual effects. Designed specifically for developers who demand high performance, MotionCode adds immediate visual feedback for document saves, active editor line changes, build completions, diagnostic errors, and workspace file state changes.

[!NOTE] MotionCode adheres strictly to official VS Code Extension APIs (TextEditorDecorationType, FileDecorationProvider, StatusBarItem, WebviewPanel). It never modifies VS Code core binaries or injects unsafe third-party DOM scripts.

Why Use MotionCode? (Developer Advantages)

1. Instant Event Feedback: Receive non-intrusive visual confirmation the exact millisecond you save a file (Ctrl+S), run a build, or introduce code diagnostics.
2. Enhanced Line Focus: Keep your visual focus effortlessly anchored on the active line of code with smooth focus indicators.
3. Zero Distraction Engineering: All animations are event-triggered, short-lived (300ms–800ms), and free of continuous flashing or distracting background loops.
4. Adaptive CPU Budgeting: MotionCode automatically scales frame rates and disables heavy effects on low-resource machines or power-saver profiles.
5. Theme Native: Integrates seamlessly with all VS Code themes (Dark, Light, High Contrast) using native VS Code CSS tokens (var(--vscode-*)).
6. 100% Offline & Private: Zero data collection, telemetry, or external network requests.

🎬 Complete Animation Guide: How Every Animation Works & How to Apply Them

MotionCode includes 6 core animation systems. Here is a full breakdown of how each animation works under the hood, how to trigger it, and how to configure its visual style:

1. Document Save Feedback Animation (SaveEffects)

• How It Works: When a file is saved (workspace.onDidSaveTextDocument), MotionCode applies a temporary whole-line editor decoration (TextEditorDecorationType) over visible ranges and displays a smooth 600ms status bar badge (✓ Saved).
• Trigger Event: Pressing Ctrl+S / Cmd+S or running command MotionCode: Test Save Animation.
• Configurable Options:
  • "off": Completely disables save visual feedback.
  • "subtle": Light teal background overlay (10% opacity) + status text.
  • "normal": Standard teal overlay (15% opacity) + status text.
  • "strong": High contrast teal overlay (30% opacity) + status text.
• How to Apply:
  • Dashboard: Set Save Feedback Style dropdown to Subtle, Normal, or Strong.
  • settings.json: "motionCode.saveAnimation": "subtle"

2. Active Cursor Focus & Trail Effects (CursorEffects)

• How It Works: Listens to cursor position changes (window.onDidChangeTextEditorSelection). When your cursor moves to a new line, MotionCode calculates line bounds and applies a left border accent and background glow.
• Trigger Event: Moving the cursor with arrow keys, mouse clicks, or typing.
• Configurable Styles:
  • minimal: Subtle 2px left border using VS Code --vscode-focusBorder.
  • glow: Neon teal (#4ec9b0) 4px accent border with soft background glow.
  • pulse: Warm amber (#ce9178) 4px accent border.
  • ripple: Soft purple (#c586c0) 4px accent border.
  • trail: Sapphire blue (#569cd6) 3px accent border.
  • none: Disables cursor line focus decorations.
• How to Apply:
  • Dashboard: Select from Cursor Focus Effect dropdown.
  • settings.json: "motionCode.cursorEffect": "glow"

3. Active Line Highlighting & Error Emphasis (EditorEffects)

• How It Works:
  1. Line Highlight: Renders a smooth background tint on the active line.
  2. Error Emphasis: Listens to language diagnostics (languages.onDidChangeDiagnostics, debounced at 600ms). When new code errors are detected, MotionCode briefly highlights the error lines with a #f14c4c overview ruler lane indicator and a 1.2s soft red tint.
• Trigger Event: Typing code that introduces or fixes syntax/linter diagnostics.
• How to Apply:
  • Dashboard: Check Active Line Highlight and Diagnostic Alert Notifications.
  • settings.json: "motionCode.activeLineEffect": true, "motionCode.notificationEffects": true

4. Build & Test Success Celebrations (BuildEffects)

• How It Works: Listens to VS Code terminal execution completion (window.onDidEndTerminalShellExecution when exit code = 0). Displays an interactive visual status celebration (🎉 ✓ BUILD SUCCESS).
• Trigger Event: Terminal build script completion or running MotionCode: Test Build Animation / MotionCode: Test Test Animation.
• Configurable Styles:
  • none: Disables build celebrations.
  • minimal: Shows text notification in status bar for 1500ms.
  • normal: Displays an information toast message.
  • celebration: Displays a full top-line editor banner highlight + information toast.
• How to Apply:
  • Dashboard: Set Build Celebration Style dropdown.
  • settings.json: "motionCode.buildCelebration": "celebration"

5. File Explorer State Indicators (MotionFileDecorationProvider)

• How It Works: Implements VS Code's FileDecorationProvider API to render subtle status badges and theme colors directly in the VS Code File Explorer tree.
• Badges Provided:
  • ✓ (Green): Recently saved document (displays for 4 seconds after saving).
  • ✦ (Keyword color): Configuration & Build files (package.json, tsconfig.json, esbuild.js).
  • ⚡ (Testing color): Test specification files (*.test.ts, *.spec.js).
• How to Apply:
  • Dashboard: Check File Explorer Animations.
  • settings.json: "motionCode.fileAnimations": true

6. Animation Speed & Intensity Fine-Tuning

MotionCode allows global tuning of animation duration and visual opacity:

• Animation Speed (motionCode.animationSpeed):
  • fast: 0.6x base duration (~300ms) for ultra-snappy feedback.
  • normal: 1.0x base duration (~500ms).
  • slow: 1.5x base duration (~750ms) for smooth transitions.
• Effect Intensity (motionCode.animationIntensity):
  • subtle: 0.7x multiplier (lower opacity, minimal borders).
  • normal: 1.0x standard multiplier.
  • strong: 1.4x multiplier (vibrant borders & colors).

Interactive Dashboard

Launch the MotionCode Dashboard at any time:

• Command Palette: MotionCode: Open Dashboard
• Status Bar: Click ✦ MotionCode: ON

MOTIONCODE — Animated VS Code Experience

┌─────────────────────────────────────────────────────────────┐
│ GLOBAL CONTROLS                                             │
│ ● Enable MotionCode [ ON ]                                  │
│ Performance Profile: [ Auto (Adaptive) ]                    │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ PRESETS                                                     │
│ [ Minimal ]  [ Neon ]  [ Cyberpunk ]  [ Developer ] [ Focus ]│
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ VISUAL EFFECTS                                              │
│ ✓ File Explorer Animations   Save Style: [ Subtle ]         │
│ ✓ Active Line Highlight      Cursor Effect: [ Minimal ]     │
│ ✓ Diagnostic Alerts          Build Celebration: [ Normal ]  │
└─────────────────────────────────────────────────────────────┘

Workspace Presets

Switch workspace styles instantly with one click or command:

Installation & Getting Started

Installation

1. Open Visual Studio Code.
2. Press Ctrl+Shift+X (or Cmd+Shift+X on macOS) to open Extensions.
3. Search for MotionCode.
4. Click Install.

Quick Start

• Press Ctrl+Alt+M (or Cmd+Alt+M) to toggle MotionCode on or off instantly.
• Save any open file to see the Save Feedback Animation in action!

Commands Reference

Press Ctrl+Shift+P (Cmd+Shift+P) to run any MotionCode command:

Configuration Settings

Customize MotionCode directly in VS Code Settings (Ctrl+, -> Search MotionCode):

{
  "motionCode.enabled": true,
  "motionCode.animationIntensity": "subtle",
  "motionCode.animationSpeed": "normal",
  "motionCode.performanceMode": "auto",
  "motionCode.cursorEffect": "minimal",
  "motionCode.saveAnimation": "subtle",
  "motionCode.fileAnimations": true,
  "motionCode.buildCelebration": "normal",
  "motionCode.notificationEffects": true,
  "motionCode.activeLineEffect": true,
  "motionCode.reducedMotion": false,
  "motionCode.debug": false
}

Performance & Security Safeguards

[!IMPORTANT] Performance Principles

• Zero Event Leakage: All event listeners, decorations, and timers are properly cleaned up on disposal.
• Adaptive Throttling: Frame rate automatically scales down during heavy workspace operations.
• Zero External Requests: 100% local extension running entirely inside your local VS Code environment.

Accessibility

MotionCode fully respects system and editor accessibility settings:

• Setting motionCode.reducedMotion to true disables rapid transitions, particle effects, and cursor motion trails while keeping clean static state indicators.

Creator & Developer Credits

License

This project is licensed under the MIT License.