Tommaso Stanga: Kernel Fragment

Tommaso Stanga

Kernel Fragment is a desktop companion that manifests as a sentient fragment of operating system code escaped onto your screen. Designed as a transparent overlay, it exists as an autonomous entity moving on a strict pixel grid, leaving pixelated footprints that fade over time. The visual language draws from 80s arcade aesthetics, specifically Space Invaders and Pac-Man, with squared pixel art, jerky grid-based movement, and no anti-aliasing. Every element snaps to a 10 pixel grid, creating the sensation of a rogue process that has broken free from the kernel and materialized as a living sprite.
The character monitors multiple system inputs simultaneously: CPU usage, mouse velocity, webcam hand tracking via MediaPipe, and ambient audio levels. When CPU crosses specific thresholds, additional colored entities spawn and create a colony that interacts, collides, and flees. Mouse movement triggers escalating responses from subtle glitches to panic escapes with teleportation. Detected hands cause immediate flee reactions, while audio levels modulate footprint density.

This widget transforms invisible computational processes into chaotic, visible presences. Characters glitch through space before teleporting, collide and scatter in opposite directions, creating emergent behaviors through autonomous agents that exhibit genuine unpredictability rather than predetermined patterns.

GitHub repository

Desktop icon

Basic behavior: the character wanders on a pixel grid, leaving footprints that fade over time.

CPU-reactive spawning: colored characters appear sequentially at 15%, 30%, 40%, and 50% CPU usage thresholds.

Collision system: when characters get within 8 grid units, both alert and flee in opposite directions.

Panic mode: very high mouse velocity triggers immediate teleportation to random position with glitch effect.

Audio reactivity: microphone input modulates footprint density from 1x (silent) to 10x (loud).

Hand tracking via MediaPipe: detected hands appear as pixelated landmarks, triggering escape behavior when close to the character.

The following code sections highlight some of the core technical implementations that bring Kernel Fragment to life. These snippets demonstrate how the widget manages sequential character spawning to prevent chaos, calculates mouse movement intensity for progressive behavioral responses, and creates the signature glitch teleportation effect that makes the characters feel genuinely broken and unpredictable.

Sequential spawn queue
Instead of spawning all characters simultaneously when CPU spikes, this queue system creates a controlled, one-at-a-time appearance with 1-second delays between each spawn, preventing visual and audio chaos.

async processSpawnQueue() {
    if (this.isSpawning || this.spawnQueue.length === 0) return;
    
    this.isSpawning = true;
    
    while (this.spawnQueue.length > 0) {
        const slotIndex = this.spawnQueue.shift();
        await this.spawnCharacter(slotIndex);
        
        if (this.spawnQueue.length > 0) {
            await this.delay(1000);
        }
    }
    
    this.isSpawning = false;
}

Mouse velocity activity detection
This algorithm doesn't just track mouse position but calculates movement intensity by combining speed (60%) and distance (40%), creating progressive behavioral responses from subtle glitches to full panic teleportation.

calculateActivityLevel() {
    const recentMovements = this.mouseMovements.filter(m => 
        Date.now() - m.time < 2000
    );
    
    const avgInterval = totalInterval / (recentMovements.length - 1);
    const avgDistance = totalDistance / recentMovements.length;
    
    const speedFactor = Math.min(1, this.movementTimeout / avgInterval);
    const distanceFactor = Math.min(1, avgDistance / 50);
    
    this.activityLevel = (speedFactor * 0.6 + distanceFactor * 0.4);
}

Glitch teleportation mechanic
The character oscillates back and forth at its starting position a random number of times (2-6), then teleports forward by a distance equal to the oscillation count, creating unpredictable "broken" movement that feels authentically glitchy.

async startMovementGlitch(originalDirection) {
    this.glitchStartPosition = { ...this.kernel.currentPosition };
    const maxOscillations = 2 + Math.floor(Math.random() * 5);
    
    while (this.glitchCounter < maxOscillations) {
        // Oscillate backward
        this.kernel.currentPosition.x -= this.glitchDirection.x;
        this.kernel.updateCharacterPosition();
        await this.delay(this.frameTime);
        
        // Return to start
        this.kernel.currentPosition = { ...this.glitchStartPosition };
        this.kernel.updateCharacterPosition();
        await this.delay(this.frameTime);
        
        this.glitchCounter++;
    }
    
    // Teleport forward by oscillation count
    const distance = this.glitchCounter + 1;
    this.kernel.currentPosition.x += this.glitchDirection.x * distance;
}