Code Sensei

A VS Code companion that keeps you focused with a playful pixel world, responsive character, and gentle nudges as you code.

Comment

Code Sensei

Inspiration

Code Sensei was inspired by the idea of making focus feel fun. By turning coding activity into gentle, playful feedback, it helps you stay in flow without pressure.

What it does

Code Sensei is a VS Code extension that reacts to your editor activity with a pixel-art companion, ambient audio, and a focus timer to nudge you back when you drift.

Features

  • Editor-aware animations and playful focus nudges
  • Session timer with milestone moments
  • Infinite parallax pixel-art background
  • Subtle audio ambience with SFX ducking
  • Simple calibration and debug controls

How it Works:

  1. Start: Open the view and press START to enable audio and show the timer
  2. Type: Typing triggers walk animations and begins timing
  3. Pause: Short inactivity plays a hop (jump/fall) and returns to idle
  4. Away: Leaving VS Code marks you away and pauses the session
  5. Return: Short breaks get a gentle nudge; long breaks trigger a reset sequence
  6. Restart: Press RESTART to reset the session and scene

How we built it

Frontend

  • VS Code webview (HTML/CSS/JS) generated from TypeScript
  • Sprite-sheet animations with baseline compensation
  • Canvas rendering with mirrored, infinite parallax

Backend & Services

  • VS Code Extension Host APIs for view, commands, and events
  • Local assets only (no remote services)

Key Libraries

  • TypeScript
  • VS Code API
  • Node.js built-ins

Architecture:

Extension (Host) ↔ Webview (HTML/CSS/JS)
      ↑                 ↓
  Commands         Activity events
  View provider    Timer, sprites, audio

Challenges we ran into

  • Pixel-perfect grounding across frames and zoom levels
  • Smooth, seamless parallax tiling
  • Webview CSP and autoplay constraints for media

Accomplishments that we're proud of

  • Automatic ground-line detection with per-frame baseline fixes
  • Responsive away/return choreography that feels fun, not naggy
  • Crisp, performant pixel aesthetic inside a secure webview

What we learned

  • Webview CSP, message passing, and state handling
  • Canvas techniques for animation alignment
  • Designing gentle feedback loops for focus

What's next for Code Sensei

Technical Roadmap:

  • Theme/character packs and configurable timers
  • Behavior toggles and sound controls
  • Lightweight progress and streak tracking

Feature Expansion:

  • Achievements and celebratory milestones
  • Optional integrations (tests/builds/Git events)
  • More scenes and ambient soundscapes

Train with Code Sensei! 🥋!!

Built With

Share this project:

Updates