// MENTESH Pro·Q 4 — 3U parametric EQ with up to 24 bands
// Dark navy panel, large analyzer+curves display, band handles with colored nodes,
// FREQ/GAIN/Q knobs, 24-band selector strip, OUTPUT GAIN / DRY-WET / AUTO-GAIN.
function MenteshProQ({ variant = {} }) {
const [preset, setPreset] = React.useState(2);
const presets = [
'Flat', 'Vocal Clarity', 'Drum Bus', 'Master Polish', 'Warm Tape Roll-Off',
'Air Lift', 'Mud Cut', 'Surgical Notch',
];
// 7 active bands, each with freq (0..1 log x), gain (-12..+12 -> 0..1), q, shape, color, enabled
// Bright, saturated band colors matching Pro-Q reference photo
const bandColors = ['#3a9eff', '#7ab8e0', '#f5c842', '#66dc7a', '#c084ff', '#ff7aa8', '#ff9a4a'];
const [bands, setBands] = React.useState([
{ freq: 0.08, gain: 0.42, q: 0.5, shape: 'LS', color: bandColors[0] }, // low shelf slight cut
{ freq: 0.22, gain: 0.58, q: 0.45, shape: 'BELL', color: bandColors[1] }, // low bump
{ freq: 0.40, gain: 0.75, q: 0.35, shape: 'BELL', color: bandColors[2] }, // mid boost
{ freq: 0.55, gain: 0.22, q: 0.72, shape: 'BELL', color: bandColors[3] }, // mid notch
{ freq: 0.70, gain: 0.25, q: 0.80, shape: 'BELL', color: bandColors[4] }, // deep notch
{ freq: 0.82, gain: 0.68, q: 0.55, shape: 'BELL', color: bandColors[5] }, // hi bump
{ freq: 0.92, gain: 0.55, q: 0.5, shape: 'HS', color: bandColors[6] }, // high shelf
]);
const [selected, setSelected] = React.useState(2);
const [outputGain, setOutputGain] = React.useState(0.5);
const [dryWet, setDryWet] = React.useState(1.0);
const [autoGain, setAutoGain] = React.useState(true);
const updateBand = (i, patch) =>
setBands(bs => bs.map((b, j) => j === i ? { ...b, ...patch } : b));
const cur = bands[selected];
return (
updateBand(selected, patch)} selected={selected} />
updateBand(selected, patch)} />
);
}
// ——— TOP STRIP ———————————————————————————————————————————————
function ProQTopStrip({ preset, setPreset, presets }) {
return (
ME
ME.Q4
MENTESH ENGINEERING
NO
{presets[preset]}
— Curve Preset
20Hz
20kHz
);
}
const proqNavBtn = {
width: 26, height: 24,
background: 'rgba(255,255,255,0.04)',
border: '1px solid rgba(255,255,255,0.06)',
borderRadius: 3, color: '#a8b4c4', fontSize: 12, cursor: 'pointer',
};
// ——— LEFT CONTROLS ———————————————————————————————————————————
function ProQLeftControls({ cur, onChange, selected }) {
return (
BAND SELECT
SOLO
onChange({ freq: v })}
label="FREQ" color={cur.color} size={64} />
onChange({ gain: v })}
label="GAIN" color={cur.color} size={64} />
BAND
▼
);
}
// ——— RIGHT CONTROLS ———————————————————————————————————————————
function ProQRightControls({ cur, onChange }) {
const shapes = ['BELL', 'LS', 'HS', 'LC', 'HC', 'NOTCH', 'TILT'];
const cycleShape = (dir) => {
const i = shapes.indexOf(cur.shape);
const next = shapes[(i + dir + shapes.length) % shapes.length];
onChange({ shape: next });
};
return (
onChange({ gain: v })}
label="GAIN" color={cur.color} size={64} />
onChange({ q: v })}
label="Q" color={cur.color} size={64} />
TYPE
{cur.shape}
);
}
function proqBtn(color) {
return {
flex: 1, height: 24,
background: `${color}15`,
border: `1px solid ${color}40`,
borderRadius: 3, color: color,
fontSize: 9, letterSpacing: '0.18em', cursor: 'pointer',
fontFamily: 'inherit',
};
}
// ——— MAIN DISPLAY ———————————————————————————————————————————
function ProQDisplay({ bands, selected, setSelected, updateBand }) {
const W = 900, H = 300;
const svgRef = React.useRef(null);
const drag = React.useRef(null);
// spectrum animation
const [t, setT] = React.useState(0);
React.useEffect(() => {
let id; const loop = () => { setT(x => x + 1); id = requestAnimationFrame(loop); };
id = requestAnimationFrame(loop); return () => cancelAnimationFrame(id);
}, []);
const NUM_BARS = 120;
const bars = Array.from({ length: NUM_BARS }, (_, i) => {
const x = i / (NUM_BARS - 1);
const base = Math.exp(-Math.pow((x - 0.25) * 2.5, 2)) * 0.75
+ Math.exp(-Math.pow((x - 0.55) * 3, 2)) * 0.5
+ Math.exp(-Math.pow((x - 0.85) * 4, 2)) * 0.32;
const wobble = Math.sin(t * 0.04 + i * 0.5) * 0.06 + Math.sin(t * 0.09 + i * 1.1) * 0.04;
return { x, h: Math.max(0.04, Math.min(0.95, base + wobble)) };
});
// compute EQ curve by summing each band's bell/shelf contribution
const curveY = (x) => {
let totalDb = 0;
bands.forEach(b => {
const db = (b.gain - 0.5) * 24; // -12..+12
const bandCenterX = b.freq;
const q = 0.3 + b.q * 4;
const dist = (x - bandCenterX);
let contrib = 0;
if (b.shape === 'LS') {
contrib = db * (1 / (1 + Math.exp((x - bandCenterX) * 12)));
} else if (b.shape === 'HS') {
contrib = db * (1 / (1 + Math.exp(-(x - bandCenterX) * 12)));
} else {
// bell
contrib = db * Math.exp(-Math.pow(dist * q * 4.5, 2));
}
totalDb += contrib;
});
// convert db (-12..+12) to y (0..1 with 0.5 = 0dB)
return 0.5 - (totalDb / 24) * 0.9;
};
// filled per-band curves
const bandPath = (b) => {
let d = `M 0 ${H * 0.5}`;
for (let i = 0; i <= 160; i++) {
const x = i / 160;
const db = (b.gain - 0.5) * 24;
const q = 0.3 + b.q * 4;
const dist = (x - b.freq);
let contrib = 0;
if (b.shape === 'LS') contrib = db * (1 / (1 + Math.exp((x - b.freq) * 12)));
else if (b.shape === 'HS') contrib = db * (1 / (1 + Math.exp(-(x - b.freq) * 12)));
else contrib = db * Math.exp(-Math.pow(dist * q * 4.5, 2));
const y = 0.5 - (contrib / 24) * 0.9;
d += ` L ${x * W} ${y * H}`;
}
d += ` L ${W} ${H * 0.5} Z`;
return d;
};
// master curve path
const masterPath = (() => {
let d = `M 0 ${curveY(0) * H}`;
for (let i = 1; i <= 200; i++) {
const x = i / 200;
d += ` L ${x * W} ${curveY(x) * H}`;
}
return d;
})();
const onNodeDown = (e, i) => {
e.stopPropagation();
setSelected(i);
const rect = svgRef.current.getBoundingClientRect();
drag.current = { i };
const onMove = ev => {
const fx = Math.max(0, Math.min(1, (ev.clientX - rect.left) / rect.width));
const fy = Math.max(0, Math.min(1, (ev.clientY - rect.top) / rect.height));
const gain = 1 - fy;
updateBand(i, { freq: fx, gain });
};
const onUp = () => {
window.removeEventListener('mousemove', onMove);
window.removeEventListener('mouseup', onUp);
};
window.addEventListener('mousemove', onMove);
window.addEventListener('mouseup', onUp);
};
return (
);
}
// ——— 24-BAND STRIP ———————————————————————————————————————————
function ProQBandStrip({ bands, selected, setSelected }) {
return (
{Array.from({ length: 24 }, (_, i) => {
const b = bands[i];
const active = !!b;
const isSel = selected === i;
return (
);
})}
);
}
function ProQSlider({ value, onChange, label, color }) {
const ref = React.useRef(null);
const onDown = e => {
const rect = ref.current.getBoundingClientRect();
const update = (x) => {
const v = Math.max(0, Math.min(1, (x - rect.left) / rect.width));
onChange(v);
};
update(e.clientX);
const onMove = ev => update(ev.clientX);
const onUp = () => {
window.removeEventListener('mousemove', onMove);
window.removeEventListener('mouseup', onUp);
};
window.addEventListener('mousemove', onMove);
window.addEventListener('mouseup', onUp);
};
return (
);
}
function ProQFooter() {
return (
ME.Q4 · MENTESH ENGINEERING · 24-BAND PARAMETRIC EQ
ZERO LATENCY · NATURAL · LINEAR PHASE
);
}
function ProQRackEars() {
const ear = {
position: 'absolute', top: 0, bottom: 0, width: 54,
background: 'linear-gradient(90deg, #1a1a1e 0%, #0a0a0c 100%)',
borderTop: '1px solid rgba(255,255,255,0.04)',
borderBottom: '1px solid rgba(0,0,0,0.6)',
display: 'flex', flexDirection: 'column',
alignItems: 'center', justifyContent: 'space-between',
padding: '16px 0',
};
const screw = (
);
return (
<>
{screw}{screw}{screw}{screw}
{screw}{screw}{screw}{screw}
);
}
// ——— SHARED KNOB ———————————————————————————————————————————
function ProQGlowKnob({ value, onChange, label, size = 64, color = '#4aa3ff' }) {
const drag = React.useRef(null);
const onDown = e => {
drag.current = { y: e.clientY, v: value };
window.addEventListener('mousemove', onMove);
window.addEventListener('mouseup', onUp);
};
const onMove = e => {
if (!drag.current || !onChange) return;
const dy = drag.current.y - e.clientY;
onChange(Math.max(0, Math.min(1, drag.current.v + dy / 180)));
};
const onUp = () => {
drag.current = null;
window.removeEventListener('mousemove', onMove);
window.removeEventListener('mouseup', onUp);
};
const angle = -135 + value * 270;
const arcSteps = 40;
return (
{label}
);
}
Object.assign(window, { MenteshProQ });