Bleeding Canvas

Dress your Windows desktop in a haunting, interactive Halloween horror costume with zero click-through interruption.

Comment

Inspiration

What if your computer screen itself put on an interactive Halloween costume? We wanted to build something visceral, atmospheric, and technically seamless: a transparent Windows desktop horror overlay that bleeds dynamically as you work, game, or browse, without stealing your keyboard focus or blocking mouse clicks.

What it does

Bleeding Canvas transforms your entire Windows display into a responsive, living visceral horror canvas:

  • Kinetic Cursor Trails: Mouse movements leave cutting trails with velocity-proportional droplet scattering.
  • Dwell Pooling & Viscous Dripping: Leaving the cursor idle causes high-tension blood pools to gather until gravity overpowers surface tension, dripping down your display in real time.
  • Visceral Arsenal Strikes: Rapid clicks and swipes unleash custom impact weapons:
    • Axe: Heavy arterial chopping sprays with momentum.
    • Knife: Radial puncture splatters and intense pooling.
    • Pumpkin: Halloween smash with flying pulp chunks and orange splatter.
    • Kiro Ghost: Ethereal purple ectoplasm with glowing spectral trails.
  • 100% Procedural Web Audio: Zero external audio samples. Every splash, squish, and droplet is synthesized mathematically on the fly via the Web Audio API.
  • Zero-Clickthrough True Pass-Through: Runs silently at a locked 60 FPS on top of all applications with full mouse click-through.

How we built it

This project was constructed from day zero using Kiro's Spec-Driven Development methodology:

  1. Requirements Specification (.kiro/specs/requirements.md): Formulated strict 60 FPS render budgets (sub-16ms loop), fluid dynamics parameters, and zero-clickthrough OS contracts.
  2. Architectural Specification (.kiro/specs/design.md): Designed a multi-layered canvas pipeline (Cracks, Coagulated Rim, Visceral Body, Ectoplasm, Gloss, Weapons, Flying FX) combined with real-time SVG metaball gooey matrix filtering.
  3. Task Breakdown (.kiro/specs/tasks.md): Systematically implemented and validated memory isolation, detached native PowerShell telemetry, and graceful cleanup lifecycles.

Challenges we ran into

  • Click-through vs. Input Telemetry: Electron transparent overlays normally cannot track global mouse clicks while in click-through mode (setIgnoreMouseEvents(true)). We solved this by architecting a lightweight, detached background PowerShell worker polling user32.dll GetAsyncKeyState at 60Hz.
  • Fluid Performance: Simulating viscous surface tension and coagulating rims across a full 1920x1080 display without dropping below 60 FPS required separating rendering layers and utilizing procedural SVG matrix shaders.

Accomplishments that we're proud of

  • Achieving zero frame drops and zero CPU/GPU fan noise while running an intense fluid horror simulation across the entire desktop.
  • Complete independence from external assets: all sound effects and fluid physics are generated purely through code and Web Audio math.

What we learned

  • How Kiro's structured spec files (requirements.md, design.md, tasks.md) prevent scope creep and eliminate architecture bugs before a single line of renderer code is written.
  • Low-level Windows OS input polling patterns integrated seamlessly with modern web rendering stacks.

What's next for Bleeding Canvas

  • Multi-monitor spanning support.
  • Sound-reactive blood ripples that vibrate when music or Discord voice chat is playing.
  • Steam Deck / Gamepad vibration haptic integration.

Built With

Share this project:

Updates

Submission history