website/src/components/Spectrum.tsx

// Illustrative mass-spectrum trace for the home hero. Deterministic (no random),
// self-contained inline SVG. Big peaks use the accent; the rest are faint.
export default function Spectrum({ height = 128 }: { height?: number }) {
  const W = 1000
  const H = height
  const pad = 6
  const n = 76
  const peaks = Array.from({ length: n }, (_, i) => {
    const x = pad + (i / (n - 1)) * (W - 2 * pad)
    const s =
      Math.abs(Math.sin(i * 0.7)) *
      Math.abs(Math.sin(i * 0.27 + 1)) *
      (0.35 + 0.65 * Math.abs(Math.sin(i * 0.11)))
    const y = H - pad - (0.06 + 0.94 * s) * (H - 2 * pad)
    return { x, y, big: s > 0.55 }
  })
  return (
    <svg
      className="spectrum"
      viewBox={`0 0 ${W} ${H}`}
      preserveAspectRatio="none"
      role="img"
      aria-label="Illustrative mass spectrum: peak intensity across mass-to-charge"
    >
      <line x1={0} y1={H - pad} x2={W} y2={H - pad} stroke="var(--border)" strokeWidth={1} />
      {peaks.map((p, i) => (
        <line
          key={i}
          x1={p.x}
          y1={H - pad}
          x2={p.x}
          y2={p.y}
          stroke={p.big ? 'var(--accent-strong)' : 'var(--border-strong)'}
          strokeWidth={p.big ? 2 : 1.4}
          strokeLinecap="round"
          opacity={p.big ? 1 : 0.8}
        />
      ))}
    </svg>
  )
}