/* mock-app.jsx — visual recreations of the 2ndEars desktop app + plugins. Used inline in landing pages as "screenshot placeholders" that still feel like real product imagery. Each component renders pure SVG/HTML at a fixed virtual width; scale via CSS transform when needed. */ const { useState, useEffect } = React; // ─── Meter cells — driven by a peak (0..1) ───────────────────────────────── function MeterCells({ peak = 0.7, count = 22 }) { const cells = []; for (let i = 0; i < count; i++) { const t = (i + 1) / count; let cls = 'meter-cell'; if (t <= peak) { if (t < 0.55) cls += ' on-green'; else if (t < 0.85) cls += ' on-amber'; else cls += ' on-red'; } cells.push(); } return
{cells}
; } // ─── Letter badge (from the plugin screenshot) ───────────────────────────── function LetterBadge({ letter = 'L', side = 'LEFT' }) { return (
{side}
{letter}
); } // ─── Plugin window mock — chrome + content ────────────────────────────────── function PluginWindow({ name = 'LeftEar/GROUP', side = 'LEFTEAR', children, style }) { return (
{/* DAW host titlebar */}
{name} ×
{/* Plugin header */}
2ndEars {side}
{children}
); } function LeftEarMock({ peak = 0.74 }) { return (
INPUT
Master Bus
Enable on master track only
OFF
); } function RightEarMock({ peak = 0.82 }) { return (
INPUT
Sending
TRACK DESCRIPTION OPTIONAL
e.g. Lead vocal, doubled, slight rasp — sits front and centre.
Helps the assistant reason about this track 0/120
); } // ─── Routing graph illustration ───────────────────────────────────────────── // A simplified, hero-friendly version of the actual app routing graph. function RoutingGraphIllustration({ active = 'Master', height = 320 }) { const sources = ['Kick', 'Snare', 'OH L/R', 'Bass DI', 'Vocal Lead', 'Gtr Rhythm']; const buses = ['Drum Bus', 'Bass Bus', 'Vox Bus', 'Gtr Bus']; const edgesS2B = { 'Kick': 'Drum Bus', 'Snare': 'Drum Bus', 'OH L/R': 'Drum Bus', 'Bass DI': 'Bass Bus', 'Vocal Lead': 'Vox Bus', 'Gtr Rhythm': 'Gtr Bus', }; const colW = 200; const gap = 80; const totalW = colW * 3 + gap * 2; const yPad = 24; const itemH = 38; const itemGap = 10; const ySrc = (i) => yPad + i * (itemH + itemGap); const yBus = (i) => yPad + 30 + i * ((sources.length * (itemH + itemGap)) / buses.length - itemGap / 2); const xCol = (c) => c * (colW + gap); return ( {/* Column labels */} {['SOURCES', 'BUS · L1', 'MASTER'].map((l, i) => ( {l} ))} {/* Wires sources → buses */} {sources.map((s, i) => { const bIdx = buses.indexOf(edgesS2B[s]); const y1 = ySrc(i) + itemH / 2; const y2 = yBus(bIdx) + itemH / 2; const x1 = xCol(0) + colW; const x2 = xCol(1); const mid = (x1 + x2) / 2; return ( ); })} {/* Wires buses → master */} {buses.map((b, i) => { const y1 = yBus(i) + itemH / 2; const y2 = height / 2; const x1 = xCol(1) + colW; const x2 = xCol(2); const mid = (x1 + x2) / 2; const isActive = b === 'Drum Bus'; return ( ); })} {/* Source nodes */} {sources.map((s, i) => ( {s} −{(15 + i * 1.4).toFixed(1)} ))} {/* Bus nodes */} {buses.map((b, i) => { const isActive = b === 'Drum Bus'; return ( {b} {isActive && ( )} ); })} {/* Master node */} Master −9.8 ); } // ─── Full desktop app mock (a faked window) ───────────────────────────────── function DesktopAppMock({ height = 540 }) { return (
{/* macOS-ish window chrome */}
2ndEars
{/* App top bar */}
2ndEars
Listening
SR 48.0k ANALYZERS 2
{/* Main grid: tabs+routing | chat. Class-based grid so mobile rules can exclude this from the universal collapse-to-1col override. */}
{/* tab bar */}
{['Routing', 'Analysis', 'Masking'].map((t, i) => ( {t} ))}
{/* status bar */}
Playing Drum Bus · −12.4 LUFS · −1.0 dBFS ⏎ to send · ⇧⏎ new line
); } function ChatPanelMock() { return (
Assistant 2/5 TURNS
Analysis complete: 9 tracks analyzed.
What's the biggest issue with this mix?
Sub is hot. Kick (80–120 Hz) is masking Bass DI at −7 dB on the Drum Bus — that's your biggest issue.

Try a 1–2 dB cut at 90 Hz on the bass, sidechained to the kick. The Vocal Lead is also fighting Snare in the mid band — pull the snare down 1 dB or carve a 1 kHz dip on the snare bus
{/* suggestion chips */}
{['Is the low end balanced?', 'Which tracks are masking each other?', 'Is my mix muddy?'].map(t => ( {t} ))}
{/* input row */}
Ask about balance, EQ, dynamics…
); } // ─── Video placeholder ────────────────────────────────────────────────────── function VideoPlaceholder({ label = 'Demo video', height = 480 }) { return (
{/* faint grid */}
{label} · placeholder
); } // ─── Spectrum bars (used in analysis-style decoration) ────────────────────── function SpectrumBars({ bars = [0.6, 0.85, 0.55, 0.3, 0.5, 0.7, 0.9, 0.45, 0.25, 0.6, 0.5, 0.35], height = 40, width = 160 }) { const barW = (width - (bars.length - 1) * 2) / bars.length; return ( {bars.map((v, i) => ( ))} ); } Object.assign(window, { MeterCells, LetterBadge, PluginWindow, LeftEarMock, RightEarMock, RoutingGraphIllustration, DesktopAppMock, ChatPanelMock, VideoPlaceholder, SpectrumBars, });