VSHater

Open your files the chaotic way! Mimic wild, brainrot actions shown in the extension before you can code again. Because normal coding is just too boring.

Comment

Inspiration

After building many web apps, we wanted a change of pace and decided to try something unique like a VS Code extension. Originally, we planned to build an extension that locks your files behind LeetCode or trivia questions as a challenge.

But we felt like we could do something better. After browsing through past Hack&Roll projects and seeing the sheer amount of unhinged creations, it clicked. Why stop at trivia when we could force developers to do meme poses on camera? And thus, VSHater was born.

What it does

VSHater is a VS Code extension that encrypts your files the moment you open them and forces you to complete a webcam-based meme pose challenge to get them back.

Here's how it works:

  1. File Encryption - When you open a file, VSHater immediately encrypts it using XOR cipher with Base64 encoding
  2. Challenge Launch - A browser window opens with a webcam interface showing you a random meme pose to perform
  3. Pose Detection - Using MediaPipe's advanced pose and face mesh detection, the extension tracks your body in real-time
  4. Complete 3 Poses - You must successfully perform 3 randomly selected meme poses within 60 seconds
  5. Success or Deletion - Complete the challenge and your file is decrypted. Fail, and your file is permanently deleted

The 7 Meme Poses:

  • 67 Hands - Wave both hands rapidly up and down
  • Flight Emote - Stick your tongue out and shake your head
  • Monkey Think - Put your finger on your lip like you're pondering
  • Khaby Lame - The iconic palms-up shrug gesture
  • Mewing - Point to your jawline
  • Monkey Happy - Smile and point your finger up
  • Dab - The classic dab pose

The interface features a sleek dark theme with a split-screen layout showing the reference pose image alongside your webcam feed, a countdown timer, progress bar, and real-time match meter showing how close you are to nailing the pose.

How we built it

Technologies Used:

  • TypeScript - Core extension development
  • VS Code Extension API - Integration with the VS Code editor
  • MediaPipe Pose & FaceMesh - Real-time body and facial landmark detection
  • Node.js HTTP Server - Local server to host the challenge interface
  • HTML5/CSS3/JavaScript - Browser-based challenge UI
  • esbuild - Fast TypeScript bundling

Architecture:

The extension consists of three main modules:

  1. Extension Core (extension.ts) - Hooks into VS Code's onDidOpenTextDocument event to intercept file opens, manages the encryption/decryption workflow, and handles file deletion on timeout

  2. Encryption Module (encryption.ts) - Implements XOR cipher encryption with a marker-based system to detect already-encrypted files

  3. Server Module (server.ts) - Spins up a local HTTP server on port 3742 that serves the challenge HTML interface and handles completion/timeout callbacks

Pose Detection Implementation:

We leveraged MediaPipe's pre-trained models to detect 33 body landmarks and 468 facial landmarks in real-time. Each meme pose has a custom detection algorithm:

  • Distance-based detection - For poses requiring finger proximity to facial features (mewing, monkey think)
  • Angle-based detection - Using dot products to calculate elbow and arm angles (dab, khaby lame)
  • Motion-based detection - Tracking position history over 30 frames to detect oscillation patterns (67 hands, flight emote)
  • Confidence threshold - Requiring 5 consecutive matching frames to confirm a pose, reducing false positives

Challenges we ran into

We originally wanted to display the pose challenge directly inside VS Code using a WebView panel. However, VS Code's WebView runs in a sandboxed environment that restricts webcam access.

We pivoted to opening the challenge in an external browser via a local HTTP server, which gave us reliable camera access across all platforms.

Accomplishments that we're proud of

We successfully published VSHater to the VS Code Marketplace, making it available for anyone to install it. Seeing our joke project go from a late-night idea to a published extension was incredibly rewarding.

We are also proud of the technical implementation. The pose detection system works surprisingly well, accurately recognizing complex poses like the dab and Khaby Lame shrug in real-time. Building custom detection logic for each meme pose was a fun challenge that pushed us to deeply understand MediaPipe's landmark system.

What we learned

VS Code Extension Development - We gained hands-on experience with the VS Code Extension API, learning how to hook into editor events, manipulate file contents, and manage extension lifecycle.

MediaPipe and Computer Vision - Working with MediaPipe taught us about pose estimation, facial landmark detection, and the mathematics behind gesture recognition.

What's next for VSHater

  • More meme poses - Expand the pose library with more iconic internet moments (fanum tax, speed my momma kinda homeless, etc)
  • Configurable settings - Let users customize timer length, number of poses, and difficulty
  • Fix the git restore exploit - Currently, deleted files can be recovered with git restore. We plan to make the punishment truly permanent by deleting the file and committing the change automatically

Built With

Share this project:

Updates