DEV Community

Cover image for Kiroween 2025 - Haunting coding extension
Hung____
Hung____

Posted on • Edited on

Kiroween 2025 - Haunting coding extension

Haunting Extension 🩸👻🎃

Inspiration

Developers spend countless hours staring at code editors—why not make it fun? With Halloween spirit in mind, we wanted to transform the mundane coding experience into something memorable. What if errors didn't just show red squiggles, but actually bled? What if deleting code felt like a dramatic horror movie moment? That spark of "what if coding was spooky?" became Blood Drip.

What it does

Blood Drip is a VS Code extension that adds horror-themed visual effects to your coding environment:

  • 🩸 Blood Drip Animation: Error lines drip blood (5 drops reducing to 1, then repeating)
  • 👻 Ghost Cursor: Random Halloween emojis (👻🎃💀🦇🕷️🧛🧟) follow your cursor
  • 🪓 Code Killer: Delete 3+ lines and get dramatic murder notifications ("MASSACRE! 20 lines slaughtered!")
  • 💀 Spooky TODO Icons: Skull, ghost, or tombstone icons replace boring TODO markers
  • 🕯️ Candlelight Mode: Lines away from cursor dim, creating a spotlight effect

How we built it

Kiro is amazing. We used the VS Code Extension API with JavaScript. The architecture follows a controller pattern:

  • EffectManager: Central coordinator that initializes and manages all effects
  • Individual Controllers: BloodDripController, GhostCursorController, CodeKillerController, etc.
  • Configuration Manager: Handles user settings and real-time config changes
  • Decoration API: VS Code's system for adding visual elements to the editor

Challenges we ran into

  1. Animation Performance: Our first blood drip implementation created and disposed decoration types every frame—causing flickering and memory leaks. Solution: decoration pooling.

  2. VS Code Decoration Limitations: You can't directly animate decorations. We had to swap between pre-created decoration types to simulate animation.

  3. Emoji Consistency: Emojis render differently across operating systems. We tested and selected widely-supported Halloween emojis.

  4. Resource Management: Extensions run in VS Code's process. Poor cleanup = sluggish editor. We implemented proper disposal patterns and pause-on-focus-loss.

  5. Feature Conflicts: Some effects (like fog and candlelight) competed visually. We had to make tough decisions about which features to keep.

Accomplishments that we're proud of

  • Smooth Animations: The blood drip effect runs at consistent frame rates without impacting editor performance
  • Code Killer Feature: The escalating murder messages (eliminated → MURDER → CARNAGE → MASSACRE → GENOCIDE) add genuine fun to refactoring
  • Random Ghost Cursor: 12 different Halloween emojis keep every cursor movement surprising
  • Zero-Config Fun: Works immediately on install with sensible defaults
  • Full Customization: Every feature can be toggled independently via VS Code settings

What we learned

  1. VS Code's Extension API is powerful but quirky—understanding decoration types and their lifecycle is crucial
  2. Performance matters in extensions—debouncing, pooling, and pausing are essential patterns
  3. Users want control—every feature needs an on/off switch
  4. Simple ideas can be technically complex—"make blood drip" sounds easy until you're debugging animation frame timing
  5. Fun features drive engagement—the Code Killer feature gets the most reactions

What's next for Haunting Extension

Future features we're excited about:

  • 🕸️ Cobweb Corners: Decorative cobwebs appear on stale/unchanged code
  • ⚡ Lightning Flash: Brief screen flash when saving files with errors
  • 👁️ Watching Eyes: Blinking eyes in the gutter on long functions (code smell indicator)
  • 🦴 Skeleton Comments: Bone emojis on commented-out dead code
  • 🐀 Creepy Crawlies: Spiders crawl across unused imports
  • 🎭 Haunted Line Numbers: Spooky symbols on Friday the 13th or Halloween
  • Seasonal Themes: Christmas horror mode, Valentine's bleeding hearts

Have a look: https://github.com/Hung-00/kiroween-haunting-extension

Thank you!

Top comments (0)