// MENTESH MT-SAT · Multiband Saturation — styled after FabFilter Saturn as a 3U rack unit // Top preset strip, large frequency-analyzer display with colored crossover points, // master Drive/Mix sidebars, and five multiband columns with Drive/Feedback/Mix + effect type. function SaturationInsert({ enabled = true, onToggleEnabled, variant = {} }) { const [preset, setPreset] = React.useState(2); const presets = [ 'Warm Tape', 'Aggressive Drums', 'Big Honey', 'Broken Radio', 'Subtle Glue', 'Tube Bass', 'Bright Air', 'Console Sat', 'Lo-Fi Crush', ]; const bandColors = ['#4aa3ff', '#f0c23a', '#5fd27a', '#b77cff', '#ff7aa8']; const bandNames = ['LOW', 'LO-MID', 'MID', 'HI-MID', 'HIGH']; const effectList = ['TAPE', 'TUBE', 'AMP', 'DISTORTION', 'SATURATION', 'BIT CRUSH', 'DELAY SM', 'DELAY LG']; // per-band state: drive, feedback, mix, type idx, solo const [bands, setBands] = React.useState(() => [0.4, 0.55, 0.6, 0.45, 0.35].map((d, i) => ({ drive: d, feedback: 0.3 + i * 0.04, mix: 0.7 - i * 0.05, type: i % effectList.length, solo: false, })) ); const [masterDrive, setMasterDrive] = React.useState(0.55); const [masterMix, setMasterMix] = React.useState(0.85); const [bandwidth, setBandwidth] = React.useState(0.55); const [dynamics, setDynamics] = React.useState(0.4); const updateBand = (i, patch) => setBands(bs => bs.map((b, j) => j === i ? { ...b, ...patch } : b)); return (
{/* main panel */}
{/* middle: sidebars + display */}
{/* bottom: 5 bands */}
{bands.map((b, i) => ( updateBand(i, patch)} borderRight={i < 4} /> ))}
); } // ——— TOP STRIP ——————————————————————————————————————————————— function SatTopStrip({ preset, setPreset, presets }) { return (
{/* mentesh logo block */}
ME
ME.SATURATOR MENTESH ENGINEERING
{/* preset navigator */}
NO {presets[preset]} — Modulation Preset
{/* LO/HI labels top-right, like Saturn */}
LOW HIGH
); } const navBtn = { 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 SIDEBAR ——————————————————————————————————————————————— function SatLeftSidebar({ drive, setDrive }) { return (
); } function SatRightSidebar({ mix, setMix, bandwidth, setBandwidth, dynamics, setDynamics }) { return (
WIDE
); } // ——— MAIN DISPLAY ——————————————————————————————————————————————— function SatDisplay({ bandColors, bands }) { // animated spectrum: bars whose heights wobble, with colored crossover vertical lines 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 W = 900, H = 260; // crossover x positions (log-ish) const crossovers = [0.18, 0.36, 0.56, 0.78]; // generate spectrum bars const NUM_BARS = 80; const bars = Array.from({ length: NUM_BARS }, (_, i) => { const x = i / (NUM_BARS - 1); // base shape: louder bass, tapering off const base = Math.exp(-Math.pow((x - 0.3) * 2.4, 2)) * 0.85 + Math.exp(-Math.pow((x - 0.55) * 3.2, 2)) * 0.55 + Math.exp(-Math.pow((x - 0.82) * 4, 2)) * 0.32; const wobble = Math.sin(t * 0.05 + i * 0.6) * 0.08 + Math.sin(t * 0.11 + i * 1.3) * 0.05; const h = Math.max(0.04, Math.min(0.95, base + wobble)); // color per band let color = bandColors[0]; for (let c = 0; c < crossovers.length; c++) { if (x >= crossovers[c]) color = bandColors[c + 1]; } return { x, h, color }; }); return (
{/* freq gridlines */} {/* horizontal dB grid */} {[0.2, 0.4, 0.6, 0.8].map(y => ( ))} {/* vertical freq grid */} {[0.1, 0.25, 0.45, 0.7, 0.9].map(x => ( ))} {/* spectrum bars */} {bars.map((b, i) => { const bw = W / NUM_BARS - 1.2; const bx = b.x * (W - bw); const bh = b.h * (H * 0.78); return ( ); })} {/* average-line curve overlay */} { let d = `M 0 ${H}`; bars.forEach(b => { d += ` L ${b.x * W} ${H - b.h * H * 0.78 - 20}`; }); d += ` L ${W} ${H} Z`; return d; })()} fill="rgba(180,210,240,0.06)" stroke="rgba(180,210,240,0.35)" strokeWidth="1" /> {/* crossover dividers — colored vertical lines with diamond handles */} {crossovers.map((x, i) => ( ))} {/* frequency labels at bottom */} {[ { x: 0.08, l: '50' }, { x: 0.22, l: '100' }, { x: 0.38, l: '300' }, { x: 0.55, l: '1k' }, { x: 0.72, l: '3k' }, { x: 0.88, l: '10k' }, ].map(f => ( {f.l}Hz ))} {/* band label pills above display */}
{['LOW', 'LO-MID', 'MID', 'HI-MID', 'HIGH'].map((lbl, i) => ( {lbl} ))}
); } // ——— BAND COLUMN ——————————————————————————————————————————————— function SatBandColumn({ color, name, band, effectList, onChange, borderRight }) { return (
{/* colored LED tab header */}
{/* three knobs row */}
onChange({ drive: v })} label="DRIVE" color={color} size={50} /> onChange({ feedback: v })} label="FEEDBACK" color={color} size={50} /> onChange({ mix: v })} label="MIX" color={color} size={50} />
{/* Band / Modulation / Type heading */}
BAND MODULATION TYPE
{/* effect type list */}
{effectList.map((eff, i) => { const active = i === band.type; return ( ); })}
{/* band + modulation chips bottom */}
BAND ▼ MOD — {name}
); } // ——— FOOTER ——————————————————————————————————————————————— function SatFooter() { return (
ME.SATURATOR · MULTIBAND SATURATION MENTESH ENGINEERING · HAND-TUNED
); } // ——— RACK EARS ——————————————————————————————————————————————— function SatRackEars() { 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}
); } // ——— KNOBS ——————————————————————————————————————————————— function SatGlowKnob({ value, onChange, label, size = 80, color = '#4aa3ff' }) { const ref = React.useRef(null); 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 = 48; return (
{/* glowing outer arc */} {Array.from({ length: arcSteps }, (_, i) => { const a = -135 + (i / (arcSteps - 1)) * 270; const lit = (i / (arcSteps - 1)) <= value; const r = 46, cx = 50, cy = 50; const rad = a * Math.PI / 180; const x1 = cx + Math.cos(rad) * (r - 4); const y1 = cy + Math.sin(rad) * (r - 4); const x2 = cx + Math.cos(rad) * r; const y2 = cy + Math.sin(rad) * r; return ; })} {/* knob body */}
{/* tick */}
{/* center cap */}
{label}
); } function SatSmallKnob({ value, onChange, label, color = '#a0b4cc', size = 44, subtle = false, center = false }) { const drag = React.useRef(null); const onDown = e => { if (!onChange) return; 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 / 160))); }; const onUp = () => { drag.current = null; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); }; const angle = -135 + value * 270; return (
{/* ring */} {/* arc fill */} {/* body */}
{label}
); } // expose to global scope for other bundles Object.assign(window, { SaturationInsert });