Initial CoolSoup implementation

CoolSoup is a React + TypeScript + Vite application that generates visual patterns and converts them to audio through spectral synthesis. Features multiple image generators (Tixy expressions, geometric tiles, external APIs) and an advanced audio synthesis engine that treats images as spectrograms.

src/components/HelpPopup.tsx

@@ -0,0 +1,66 @@
+import { useEffect } from 'react'
+
+interface HelpPopupProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export default function HelpPopup({ isOpen, onClose }: HelpPopupProps) {
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape)
+      return () => document.removeEventListener('keydown', handleEscape)
+    }
+  }, [isOpen, onClose])
+
+  if (!isOpen) return null
+
+  return (
+    <div
+      className="fixed inset-0 bg-transparent flex items-center justify-center z-50"
+      onClick={onClose}
+    >
+      <div
+        className="bg-black border border-white p-8 max-w-md w-full mx-4"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex justify-between items-start mb-6">
+          <h2 className="text-xl font-bold text-white">About CoolSoup</h2>
+          <button
+            onClick={onClose}
+            className="text-white hover:text-gray-300 text-xl"
+          >
+            ×
+          </button>
+        </div>
+
+        <div className="text-white space-y-4">
+          <p>
+            CoolSoup generates visual patterns and converts them to audio through spectral/additive synthesis. Create images using mathematical expressions, waveforms, geometric patterns, or upload your own photos, then transform them into sound by treating the image as a spectrogram.
+          </p>
+
+          <div className="pt-4 border-t border-gray-600">
+            <p className="text-sm">
+              Created by{' '}
+              <a
+                href="https://raphaelforment.fr"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-white underline hover:text-gray-300"
+              >
+                Raphaël Forment
+              </a>
+              {' • License: AGPL-3.0'}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}