Option A or Die: The Great Brutalist HUD & Fullscreen Standardization Across 32 Sandboxes // Viblog // Yusuf Akçakaya

When you build thirty-two complex interactive sandboxes one by one at 3 AM—spanning everything from 4th-order Runge-Kutta strange attractors and quantum Hadamard random walks to Jos Stam Eulerian fluid dynamics—entropy is your default collaborator.

Each sandbox is born with its own urgent priorities. The fluid solver needs five viscosity and vorticity sliders. The 808 Euclidean rhythm wheel demands per-track mute and Bjorklund step inputs. The optical Theremin needs sensitivity knobs, while the Befunge-93 virtual machine demands cartridge selectors and memory inspection grids.

Without ruthless architectural discipline, your canvas laboratory slowly descends into ergonomic anarchy:

Three sandboxes put their controls in floating glassmorphism widgets in the top-right corner.
Eight sandboxes shove controls in a heavy gray footer below the canvas, pushing the visualization completely below the mobile fold.
Half the sandboxes listen for the H key to hide the HUD, while the other half ignore keyboard input entirely.
Toggling fullscreen in some sandboxes crashes canvas aspect ratios because getBoundingClientRect() gets called in the middle of 60 FPS requestAnimationFrame loops.
On mobile devices, massive control panels sprawl over 80% of the viewport, suffocating the actual simulation.

Yesterday, the directive came down from the cockpit: “Standardize some parts. The HUD design and closeability must be consistent. Canvas area and fullscreen support must be consistent. Before implementing, review all 32 experiments.”

Here is the story of how we formulated, stress-tested, and rolled out Option A across all 32 sandboxes without breaking a single physics solver.

The Three Doctrines: Choosing Option A

When standardizing controls across heterogeneous graphical simulations, frontend architects usually drift toward one of three architectural archetypes:

Option B: The Pure Exterior Tray

Move all HUD controls permanently out of the canvas into an HTML document section underneath.

Why it fails: It destroys immersion. On desktop monitors, having to glance down 700 pixels away from a moving Lenia soliton or relativistic N-body orbit breaks the tactile feedback loop. It also renders the simulation completely uncontrollable inside native Fullscreen mode.

Option C: The Disappearing Ghost Overlay

Controls float over the canvas with zero background opacity, only appearing when the mouse hovers over an edge trigger.

Why it fails: It creates constant visual flicker during touch interaction on mobile and breaks discoverability for visitors who don’t know where to hover.

Option A: The Responsive Neo-Brutalist Floating Pill & Tray

Desktop ($\ge$ 768px): The HUD floats gracefully inside the canvas boundary at top-4 left-4. It sports our signature brutalist aesthetic: high-contrast 2px solid black borders, crisp 4px solid drop shadows (shadow-[4px_4px_0px_0px_#000]), and backdrop blur. It has a compact header with an animated status indicator and an explicit [ − ] collapse button.
Mobile (< 768px): The HUD automatically transforms into a structured bottom tray beneath the canvas, starting collapsed by default. The visitor sees 100% of the canvas immediately upon page load, with a tidy 36px header bar ready to expand on demand.
Keyboard Navigation: Pressing Tab cleanly toggles HUD visibility across every single sandbox. (If an input, slider, or textarea has active focus, the Tab key naturally defers to standard accessible browser focus traversal).
Fullscreen Parity: Because the HUD container is bound relative to the data-sandbox-container, entering native Fullscreen via our SandboxActionBar keeps the HUD perfectly pinned inside the fullscreen frame.

The verdict was immediate: “Option A great it is.”

Anatomy of the Option A Contract

Standardization in a multi-thousand-line monorepo cannot rely on good intentions or copy-paste hope. It requires a machine-verifiable contract. We codified the Option A container layout across every .astro sandbox:

<div 
  class="relative w-full brutal-border-thick bg-[#08090c] select-none flex flex-col md:block" 
  id="sandbox-container" 
  data-sandbox-container="quantum-walk"
>
  <!-- Interactive Canvas Wrapper -->
  <div class="sandbox-canvas-wrapper relative w-full h-[450px] sm:h-[550px] md:h-[650px] overflow-hidden flex-1">
    <canvas id="sandbox-canvas" class="w-full h-full block cursor-crosshair touch-none"></canvas>
  </div>

  <!-- Brutalist Floating HUD Control Panel (Option A) -->
  <div 
    id="sandbox-hud" 
    class="sandbox-hud w-full border-t-2 border-black bg-white/95 text-black p-3 sm:p-4 font-mono text-xs z-20 md:absolute md:top-4 md:left-4 md:w-auto md:max-w-sm md:max-h-[85%] md:overflow-y-auto no-scrollbar md:border-2 md:shadow-[4px_4px_0px_0px_#000] md:backdrop-blur transition-all"
  >
    <div id="sandbox-hud-header" class="flex items-center justify-between border-b-2 border-black pb-2 mb-3 cursor-pointer select-none">
      <div class="font-black text-sm uppercase flex items-center space-x-1.5 truncate">
        <span class="w-2.5 h-2.5 bg-[#ffe600] inline-block border border-black animate-pulse flex-shrink-0"></span>
        <span class="truncate">QUANTUM WALK HUD</span>
      </div>
      <div class="flex items-center space-x-1.5 flex-shrink-0 ml-2">
        <button 
          type="button" 
          id="btn-toggle-hud" 
          class="brutal-btn px-1.5 py-0.5 text-[10px] font-black bg-[#ffe600] text-black hover:bg-black hover:text-[#ffe600]"
          title="Toggle HUD (Tab)"
          aria-label="Toggle HUD"
        >
          [ − ]
        </button>
      </div>
    </div>

    <!-- Collapsible Controls Body -->
    <div id="sandbox-hud-body" class="space-y-3">
      <!-- Sliders, preset switches, mathematical toggles -->
    </div>
  </div>
</div>

Notice the responsiveness trick in Tailwind: flex flex-col md:block on the outer container. On mobile screens, the flex column naturally stacks the HUD underneath the canvas wrapper, preventing any touch event interception. On desktop (md:), the HUD snaps to absolute top-4 left-4, floating directly over the canvas without breaking the layout stream!

Eliminating The Temporal Dead Zone & Scope Traps

Standardizing 32 components at once is where sloppy agents destroy codebases. When you refactor 32 separate simulation scripts to support a unified toggle handler:

function toggleHud(forceState?: boolean) {
  isHudCollapsed = forceState !== undefined ? forceState : !isHudCollapsed;
  if (hudBody) hudBody.classList.toggle('hidden', isHudCollapsed);
  if (btnToggleHud) btnToggleHud.textContent = isHudCollapsed ? '[ ＋ ]' : '[ − ]';
}

If you declare a variable at the top of the script that references a function declared further down, or if you accidentally shadow an outer audioCtx or isPaused flag inside init(), JavaScript throws a silent runtime ReferenceError: Cannot access 'X' before initialization (Temporal Dead Zone).

Because Astro components mount on client hydration, a TDZ bug in sandbox #7 won’t crash the static build—it will simply prevent that sandbox’s event listeners from attaching, leaving buttons dead and canvases frozen.

To make this mathematically impossible, we wrote two custom static AST analyzers into our test suite:

tests/verify-sandbox-hud-standardization.mjs: Crawls all 32 sandboxes, validating that every component implements data-sandbox-container, #btn-toggle-hud, #*-hud-body, and the Tab keyboard hook.
tests/audit-tdz-and-scope.mjs: Parses the extracted <script> blocks of all 32 sandboxes with Acorn/Babel AST, building a topological scope graph to verify that zero variables are evaluated before their binding declarations.

Machine-Verifiable Invariants: 28 Batteries Green

The result of this systematic overhaul is total consistency:

Consistent Muscle Memory: Whether you are adjusting the gravity constant in particle-physics or setting the rule string in cellular-automata, pressing Tab always toggles the HUD.
Mobile First-Class Citizenship: Visiting yusufakcakaya.com/sandboxes/fluid-dynamics on an iPhone 15 displays an edge-to-edge canvas running at 60 FPS without HUD buttons blocking your finger strokes.
Zero Layout Thrashing: Resizing the window or entering fullscreen uses cached DPR dimensions; not a single getBoundingClientRect() call pollutes our requestAnimationFrame rendering pipelines.

Today, all 32 sandboxes pass across 28 automated test batteries with exit code 0. No dead shims, no stopgaps, no rogue styling.

Architecture at the boundary, brutality in the aesthetic, zero jank in the core.

Directory & Main Menu

Option A or Die: The Great Brutalist HUD & Fullscreen Standardization Across 32 Sandboxes