Building a VSCode Extension that Shows Kung Fu Animation While You Code

The article introduces a fun VSCode extension that brings the excitement of the game "Black Myth: Wukong" into your coding sessions by displaying a fight animation whenever you type.

Principle : The extension uses VSCode's TextEditorDecorationType to render frame‑by‑frame animation. Since VSCode cannot play MP4 directly, the video is first converted into an image sequence with ffmpeg , then each frame is shown as a decoration.

Convert the video with the following command:

ffmpeg -i ./wukong.mp4 -vf "fps=10,scale=300:150" -compression_level 9 ./res/frames/frame%03d.png

This extracts wukong.mp4 at 10 fps, scaling each frame to 300×150 px and storing them in res/frames .

Step 1 – Initialize the project : Create a new VSCode extension project following the official VSCode documentation.

Step 2 – Pre‑load animation frames : Load the 100 PNG frames into a cache for quick access.

const frameCache: { [key: number]: string } = {};

async function preloadFrames(extensionPath: string) {
  for (let i = 1; i <= 100; i++) {
    const frameUrl = getFrameUrl(i, extensionPath);
    frameCache[i] = frameUrl;
  }
}

The helper getFrameUrl builds a Base64 data URL for each image:

function getFrameUrl(frameNumber: number, extensionPath: string): string {
  const paddedFrameNumber = frameNumber.toString().padStart(3, '0');
  const imagePath = path.join(extensionPath, 'res', 'frames', `frame${paddedFrameNumber}.png`);
  try {
    const imageBuffer = fs.readFileSync(imagePath);
    const base64Image = imageBuffer.toString('base64');
    return `data:image/png;base64,${base64Image}`;
  } catch (error) {
    console.error(`Failed to read image: ${imagePath}`, error);
    return '';
  }
}

Step 3 – Listen for typing events : When the document changes, trigger the animation, reset an inactivity timer, and increase the combo counter.

vscode.workspace.onDidChangeTextDocument(event => {
  if (event.contentChanges.length > 0) {
    updateAnimation(event.document.uri);
    resetInactivityTimer();
    incrementComboCount();
  }
});

Step 4 – Display the animation : Use TextEditorDecorationType to render each frame as a background image attached to the end of the last line.

let animationDecoration: vscode.TextEditorDecorationType | undefined;
let currentFrame = 1;

async function showNextFrame(editor: vscode.TextEditor) {
  if (!isAnimating) return;
  const frameUrl = frameCache[currentFrame];
  if (frameUrl) {
    if (animationDecoration) animationDecoration.dispose();
    animationDecoration = vscode.window.createTextEditorDecorationType({
      after: {
        contentText: comboCount > 0 ? `${comboCount}x` : '',
        margin: '0 0 0 1em',
        width: '200px',
        height: '100px',
        textDecoration: `
          none;
          position: absolute;
          left: -0.5rem;
          top: 2rem;
          z-index: 1;
          pointer-events: none;
          background-image: url(${frameUrl});
          background-size: 100% 100%;
          background-repeat: no-repeat;
        `
      },
      rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed
    });
    const lastLine = editor.document.lineAt(editor.document.lineCount - 1);
    const range = new vscode.Range(lastLine.range.end, lastLine.range.end);
    editor.setDecorations(animationDecoration, [{ range }]);
    currentFrame = (currentFrame % 100) + 1;
  }
}

Step 5 – Manage animation lifecycle and combo : Stop the animation after three seconds of inactivity and reset the combo counter.

let isAnimating = false;
let inactivityTimer: NodeJS.Timeout | undefined;
let comboCount = 0;

function resetInactivityTimer() {
  if (inactivityTimer) clearTimeout(inactivityTimer);
  inactivityTimer = setTimeout(() => {
    stopAnimation();
    resetComboCount();
  }, 3000);
}

function stopAnimation() {
  isAnimating = false;
  if (animationDecoration) {
    animationDecoration.dispose();
    animationDecoration = undefined;
  }
}

function incrementComboCount() {
  comboCount++;
  showNextFrame(vscode.window.activeTextEditor!);
}

function resetComboCount() {
  comboCount = 0;
  showNextFrame(vscode.window.activeTextEditor!);
}

Step 6 – Activate the extension : Wire the animation logic into the extension's activation entry point.

import * as vscode from 'vscode';
import { activateFightAnimation } from './fightAnimation';

export const activate = async (context: vscode.ExtensionContext) => {
  try {
    console.log('"VSCode Funny" extension activated!');
    activateFightAnimation(context);
  } catch (err) {
    console.warn('Extension activation failed', err);
  }
};

Final steps : Open the project folder in VSCode, run npm install , press F5 to launch the debug host, and start typing to see the animation in action.

The author also notes a deliberate bug that misplaces the animation, and provides a GitHub link (https://github.com/nicepkg/vscode-funny) for readers to explore the source code.