Engineering a Brainrot art installation on an Orange Pi Zero 🍊

How I built a gamified, infinite-scroll video installation for the TIAT "Slop Epistemologies" exhibition—and optimized heavy web media to run smoothly on a $15 single-board computer.

In David Foster Wallace’s Infinite Jest, "The Entertainment" is a film cartridge so fatally mesmerizing that anyone who watches it loses all desire to do anything else, eventually dying of starvation while locked to the screen.

For the TIAT (The Intersection of Art & Technology) "Slop Epistemologies" exhibition in San Francisco, I wanted to explore this concept through the lens of modern algorithmic content consumption. We live in an era of infinite short-form video slop—hyper-optimized feeds designed to bypass critical thinking and keep our attention spans permanently "cooked."

The result is BrainRot TV — The Entertainment: an interactive, physical art installation where gallery visitors step up to a monitor, grab a physical USB slide advancer, and voluntarily "LOCK IN" to an endless, deteriorating stream of curated video slop.

While the conceptual premise is artistic, bringing it to life required solving fascinating full-stack and embedded systems engineering challenges. I had to build a responsive, immersive web application capable of playing endless video feeds, generating procedural audio, and tracking gamified psychological decay—all running flawlessly on a low-end Orange Pi Zero connected to a 640×480 CRT-style display.

This is a deep dive into the architecture, physical hardware mapping, and aggressive performance optimizations that made it work. Buckle in! 😄

1. Core experience and architecture

At its core, BrainRot TV is a vanilla HTML5, CSS3, and JavaScript application served via a custom lightweight Dockerized Nginx container deployed on Google Cloud Run.

Curating the "slop"

To simulate an authentic algorithmic feed, I built a playlist of 120+ direct MP4 video URLs hosted on Google Cloud Storage. When a visitor presses "LOCK IN," the playlist is dynamically Fisher-Yates shuffled, initiating a TikTok-style vertical swipe transition between clips.

Generative audio (Web Audio API)

Instead of looping a static audio file, the installation generates an evolving, procedural drone atmosphere in real-time using the Web Audio API.

• Two detuned sine oscillators drift around A1 (55 Hz) and E2 (82.41 Hz) to create a haunting open fifth.
• A slow LFO modulates pitch drift for an organic, unsettling warmth, and a filtered pink-noise bed adds subtle analog static texture.

The audio engine listens to the active video stream using loadeddata heuristics. If the currently playing video contains active audio tracks (generated with Veo 3 or with Omni), the procedural ambient drone automatically ducks from 35% volume down to 6%, rising back up during silent clips to maintain visual and auditory tension.

// Ducking ambient music based on video audio detection
function checkVideoAudio() {
  const player = dom.videoPlayer;
  const hasAudio = player.mozHasAudio ||
                   Boolean(player.webkitAudioDecodedByteCount) ||
                   Boolean(player.audioTracks && player.audioTracks.length);

  if (hasAudio) {
    setAmbientVolume(0.06); // Duck for video sound
  } else {
    setAmbientVolume(0.35); // Bring drone back up for silent media
  }
}

The "Cooked" Meter & Meltdown Mechanics

As visitors watch, a psychological decay meter accelerates over time. It scales through 9 distinct tiers—from FRESH and SLIGHTLY GLAZED to NO THOUGHTS HEAD EMPTY and finally THE ENTERTAINMENT.

Along the way, the UI flashes single-frame subliminal commands (CONSUME, OBEY, DO NOT LOOK AWAY) and periodic Sick, Sad World title cards. Once the viewer hits 100% rot, a critical meltdown sequence initiates: violent CSS screen-shaking takes over, and the "TOUCH GRASS" exit button is forcibly disabled. You cannot leave until the system collapses into a Blue Screen of Death (BSOD) kernel panic.

2. Bridging the physical world

Because this is a physical gallery installation, we didn't want users touching a keyboard or mouse. Instead, visitors interact with the piece using a standard wireless USB presentation clicker (slide advancer) plugged into the Orange Pi.

Most commercial USB slide advancers emulate standard USB HID keyboard events, typically broadcasting PageDown or ArrowRight for the "Forward" button, and PageUp or ArrowLeft for "Back." We built a context-sensitive event dispatcher to map these simple physical inputs to complex state transitions:

const FORWARD_KEYS = new Set(['PageDown', 'ArrowRight', 'ArrowDown', 'Enter', ' ']);
const BACK_KEYS = new Set(['PageUp', 'ArrowLeft', 'ArrowUp', 'Escape', 'Backspace']);

document.addEventListener('keydown', (e) => {
  if (FORWARD_KEYS.has(e.key)) {
    e.preventDefault();
    if (state.screen === 'landing') lockIn();
    else if (state.screen === 'viewing') playNextVideo();
    else if (state.screen === 'crash' || state.screen === 'exit') lockIn();
  } else if (BACK_KEYS.has(e.key)) {
    e.preventDefault();
    // Visitors can only "Touch Grass" if the meltdown hasn't locked them in!
    if (state.screen === 'viewing' && !dom.btnTouchGrass.disabled) {
      touchGrass();
    }
  }
});

3. Optimizing for the Orange Pi Zero

Running heavy video streams and dynamic CSS filters on a modern MacBook M-series chip is trivial. Running them on an Orange Pi Zero—a tiny single-board computer with a low-frequency Allwinner ARM processor, 512MB of RAM, and minimal GPU acceleration—was an immediate performance bottleneck.

When I first tested the installation on the Orange Pi, videos stuttered heavily, frame rates dropped to single digits, and text rendered as an unreadable, blurry smudge on the 640×480 display. Solving this required engineering a specialized low-power architecture.

Automatically detecting onboard hardware

Rather than maintaining two separate codebases, the application inspects browser concurrency and hardware memory capabilities on launch, automatically engaging low-power optimizations when running on embedded edge hardware:

const LOW_POWER = new URLSearchParams(window.location.search).get('lowpower') === '1' ||
  (navigator.deviceMemory && navigator.deviceMemory <= 2) ||
  (navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 2);

Deep Video Prefetching

On weak Wi-Fi or limited CPU threads, waiting for a user to click "Skip" before fetching the next MP4 causes jarring black pauses. In low-power mode, we expanded the prefetch pipeline from 1 video to an asynchronous queue of 4 hidden <video> buffer elements. By setting preload="auto" and keeping them muted off-DOM, the browser silently saturates its media cache ahead of time, ensuring instant, zero-latency cuts between video transitions.

Killing GPU-Melting CSS Filters

Originally, as the visitor's brain rot progressed, the entire .screen--viewing container underwent intensifying CSS distortions: hue-rotate(), saturate(), and blur().

On ARM Linux without dedicated GPU compositing threads, CSS blur() forces software rendering, bringing the CPU to its knees. In low-power mode, we dynamically strip all CSS filters and fullscreen DOM overlays (such as CSS scanlines and glitch overlays), relying purely on lightweight opacity shifts and solid color contrast.

Throttling procedural canvas noise

The application features a live 2D <canvas> rendering analog TV white noise. A naive requestAnimationFrame loop firing at 60fps consumed over 40% of the Orange Pi's CPU cycles just calculating Math.random() pixel data.

To fix this, we introduced framerate throttling and resolution scaling. On low-power hardware, the canvas internal resolution is divided by 8 (scaling up smoothly via CSS) and throttled to render at just 8 frames per second—or bypassed entirely if needed:

const STATIC_FRAME_INTERVAL = LOW_POWER ? 125 : 0; // 125ms = ~8 FPS
const STATIC_RESOLUTION_DIVISOR = LOW_POWER ? 8 : 4;

4. 640×480 CRT Typography

The final hurdle was visual typography. At 640×480 resolution, custom web fonts (like Press Start 2P or stylized display fonts) rendered terribly on Linux ARM browsers. Without high-DPI screens or OS-level subpixel anti-aliasing, characters clumped together into illegible pixel soup. Furthermore, standard text-shadows (0 0 10px neon-green) blurred into muddy halos.

To guarantee crisp readability from three feet away in a dimly lit gallery, we executed a complete embedded typography overhaul:

1. System Fonts: We bypassed Google Fonts entirely on embedded devices, overriding DOM elements to use native OS font stacks (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif). Native fonts carry built-in hinting rules that align perfectly to low-resolution pixel grids.
2. Scale Doubling: We doubled font sizes across the board. Headers scaled up to 72px–110px, control buttons to 36px, and telemetry badges to 24px.
3. Zero-Shadow: We stripped all glowing text shadows and replaced backdrop-filter: blur() glassmorphism with 100% solid, pitch-black contrast backgrounds (#000 !important). Text never composites over moving video pixels.
4. Emojis: Lightweight ARM Linux OS builds often lack comprehensive Unicode emoji font tables, rendering emojis as hollow rectangular boxes (□). We wrapped UI emojis in <span class="emoji"> tags and applied display: none !important in low-power mode, replacing them with clean cybergothic ASCII indicators like ///.

Slop is in the eyes of the beholder

Building BrainRot TV for the TIAT "Slop Epistemologies" exhibition was extremely fun, and a good reminder that hardware constraints can often drive the most impactful engineering and aesthetic decisions.

By stripping away heavy GPU abstractions and tailoring media pipelines specifically for a $15 Orange Pi Zero, BrainRot now has a rock-solid 60fps video playback loop that never stutters, never crashes prematurely, and delivers an intensely mesmerizing, inescapable critique of modern digital consumption.

If you're attending the exhibition in San Francisco, step up to the terminal, grab the clicker, and hit LOCK IN! Just remember to try and Touch Grass before the system takes you under. 😅

The complete codebase for BrainRot TV is containerized with Docker and deployed on Google Cloud Run.